使用React-Redux简单项目入门（七）
目录结构：
相关代码
1:index.js
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
//第一步
import {Provider} from 'react-redux';//引入react-redux
import store from './store/index';
//Provider：是一个组件，来自于react-redux中，这也是react-redux提供的第一个API
//作用：把store提供给<Provider></Provider>所有的组件实现store共享
const App=(
{/*属性store：提供器Provider，连接了store，这样其里面的所有组件都有能力获取store里的数据*/}
<Provider store={store}>
{/*Provider将store提供给里面的组件了，这里面的组件都有能力获取store里的数据*/}
<TodoList/>
{/*<A></A>*/}
{/*<B></B>*/}
</Provider>
);
//
// ReactDOM.render(<TodoList />, document.getElementById('root'));
ReactDOM.render(App, document.getElementById('root'));
2:TodoList.js
import React,{Component} from 'react';
//第二步：connect:react-redux提供给我们第二个API
//Provider已经连接了store，并将store传给组件，通过这个方法在组件中，就可以获取到store了
import {connect} from 'react-redux';
class TodoList extends Component{
{/* 使用react-redux就不需要这样获取数据了
constructor(props){
super(props);
this.state = store.getState();
}
*/}
render(){
return(
<div>
<input
value={this.props.inputValue}//使用store传的值
onChange={this.props.changeInputValue}
/>
<button onClick={this.props.addItem}>提交</button>
<ul>
{
this.props.list.map((item,index)=>{
return <li key={index} onClick={()=>this.props.deleteItem(index)}>{item}</li>
})
}
</ul>
</div>
)
}
}
//规定映射条件
//store里的state映射到组件的props里
const mapStateToProps=(state)=>{
return {
inputValue:state.inputValue,//inputValue是指组件this.props.inputValue,state.inputValue是指store里的inputValue
list:state.list,
}
};
//把store.dispatch映射到组件的props上
const mapDispatchToProps=(dispatch)=>{
return {
//把这个函数映射到组件的props上
changeInputValue(e){
const action={//1:创建action消息
type:'change_input_value',
value:e.target.value,//把输入框里的值传给store
};
dispatch(action);//2：把这个消息传给store处理
},
addItem(){
const action={
type:'add_item',
};
dispatch(action);
},
deleteItem(index){
const action={
type:'delete_item',
index:index,
};
dispatch(action);
}
}
};
//目的：使TodoList和store做链接
//export default TodoList；未使用react-redux之前，直接导出组件
export default connect(mapStateToProps,mapDispatchToProps)(TodoList);
connect:
1）、导出connect方法，把TodoList传给connect(arr1, arr2)(TodoList)这个方法，
----作用是：做连接，将组件（TodoList）与store做连接
2）、组件在与store做连接的时候，做连接就要有一定的连接规则，这就引出第一个参数arr1： mapStateToProps
mapStateToProps就是要定义这个规则，他其实就是一个函数，并会接受一个参数state，也就是store里面的数据，同时返回一个对象出去
const mapStateToProps=(state)=>{
return {
inputValue:state.inputValue,
list:state.list,
}
};
export default connect(mapStateToProps,arr2)(TodoList);
解释以上代码：
组件TodoList与store做连接，做连接有一个规则（映射关系），规则就在mapStateToProps里面（mapStateToProps），根据这个映射关系，store里面的数据state就会映射到这个组件的props中（inputValue是指组件this.props.inputValue,state.inputValue是指store里的inputValue）在组件中通过this.props.inputValue就可以获取到公共数据中的值（reducer中定义的）
解释下
mapStateToProps：
把store里面的数据state映射给组件（TodoList），变成这个组件的props
口诀：
connect是连接；
谁和谁连接？组件和store进行连接；
怎么做连接？有一个映射关系，在mapStateToProps中
怎么映射呢？store里面的数据state映射到组件的props中
使用时，通过this.props.inputValue就可以获取到公共数据中的值了
修改store中的数据：
组件和store进行关联，store中的数据映射到组件的props上，如果我现在要对store中的数据做修改，我们也可以通过store.props这种方法进行操作；mapDispatchToProps：store.dispatch,我们把store.dispatch挂载到props中，当input的value值发生变化的时候，就要去改变store中的内容，想要改变store的内容，就要调用store.dispatch方法。store.dispatch方法被映射到了props上了，所以通过this.props.xxx去调用store.dispatch这个方法，
3:store/index.js
import {createStore} from 'redux';
import reducer from './reducer';
const store=createStore(reducer);
export default store;
4:store/reducer.js
const defaultState={//创建一个默认state
inputValue:'',
list:[],
};
export default (state=defaultState,action)=>{
//3：处理store自动传过来的action消息
if(action.type==='change_input_value'){
const newState=JSON.parse(JSON.stringify(state));//对原有数据进行深拷贝、
newState.inputValue=action.value;
return newState;//4:reducer把newState传给store,store进行更新处理
}
if (action.type==='add_item'){
const newState=JSON.parse(JSON.stringify(state));//对原有数据进行深拷贝、
newState.list.push(newState.inputValue);
newState.inputValue='';
return newState;
}
if (action.type==='delete_item'){
const newState=JSON.parse(JSON.stringify(state));//对原有数据进行深拷贝、
newState.list.splice(action.index,1);//删除从索引开始的1个
return newState;
}
return state;
}