react 项目配置以及使用react-redux

（个人复习时使用）

1.配置提供器

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList'
import { Provider} from 'react-redux'
import store from './store'

const APP=(
  <Provider store={store}>
    <TodoList></TodoList>
  </Provider>
)

ReactDOM.render(
  APP,
  document.getElementById('root')
);
 

2.配置连接器

import React from 'react';
import { connect } from 'react-redux'

export const TodoList=(props)=>{
    return ( 
        <div>
            <div>
                <input 
                value={props.inputValue} 
                onChange={props.inputChange}
                />
                <button onClick={props.addItem}>提交</button>
            </div> 
            <ul>
                {
                    props.list && props.list.map((item,index)=>{
                        return(
                            <li onClick={props.deleteItem} key={index}>{item}</li>
                        )
                    })
                }
            </ul>
        </div>
    );
} 
        

const stateToProps = (state) =>{
    return{
        inputValue:state.inputValue,
        list:state.list
    }
}

const dispathToProps = (dispatch) =>{
    return{
        inputChange(e){
            const action ={
                type:'change_input',
                value:e.target.value
            }
            dispatch(action)
        },
        addItem(){
            const action ={
                type:'add_item'
            }
            dispatch(action)
        },
        deleteItem(index){
            const action ={
                type:'delete_item',
                index
            }
            dispatch(action)
        }
    }
}
 
export default connect(stateToProps,dispathToProps)(TodoList);

3.reducer文件中写逻辑

const defaultState = {
    inputValue:'write somrthing',
    list:[]
}

export default (state = defaultState, action)=>{
    if(action.type === 'change_input'){
        let newState = JSON.parse(JSON.stringify(state))
        newState.inputValue = action.value
        return newState
    }
    if(action.type === 'add_item'){
        let newState = JSON.parse(JSON.stringify(state))
        console.log(action)
        newState.list.push(newState.inputValue)
        newState.inputValue=''
        return newState
    }
    if(action.type === 'delete_item'){
        let newState = JSON.parse(JSON.stringify(state))
        newState.list.splice(action.index,1)
        return newState
    }
    return state
}