react-redux可以方便在react中使用redux,我们就可以忘记subscribe,只需要记住reducer，action和dispatch就可以了。react-redux提供Provider和connect两个接口。
- Provider组件应该在应用最外层，传入store即可，只用一次。
- Connect负责从外部获取组件需要的参数。
- Connect可以用装饰器的方式来写。
创建stroe的时候，把原本的<Todolist/>包裹在Provider里。
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import TodoList from './TodoList.js';
//定义一个组件，就是一段jsx
//Provider 链接了store，那么Provider里所有的组件，也都能获取到store里的内容
const App = (
<Provider store={store}>
<TodoList/>
</Provider>
);
ReactDOM.render(App, document.getElementById('root'));
在组件里导出组件的时候换种写法，要用connect。理解为让TodoList与store做链接,逻辑规则在mapStateToProps和mapDispatchToProps里定，TodoList是个ui组件，导出的是个普通组件。
mapStateToProps：mapStateToProps把store里的数据映射到组件里，变成组件的props。它接受一个state做参数，返回一个对象。
mapDispatchToProps：把store.dispatch方法映射到props上，变成组件的props。它接受接受一个dispatch 做参数，返回一个对象
import React from 'react';
import { connect } from 'react-redux';
const TodoList=(props)=>{
const { inputValue , changeInpuValue ,btnClick , list , itemDelete}=props;
return(
<div>
<input type="text" value={inputValue} onChange={changeInpuValue}/>
<button onClick={btnClick}>提交</button>
<ul>
{
list.map((item,index)=>{
return <li key={index} onClick={itemDelete}>{item} </li>
})
}
</ul>
</div>
);
};
/*mapStateToProps把store里的数据映射到组件里，变成组件的props,接受一个state做参数，返回一个对象*/
const mapStateToProps=(state)=>{
return{
inputValue:state.inputValue,
list:state.list
}
}
/*store.dispatch方法挂载到props上，组件里的props如何对store做修改，接受一个dispatch 做参数，返回一个对象*/
const mapDispatchToProps=(dispatch)=>{
return{
changeInpuValue(e){
const action={
type:'change_input_value',
value:e.target.value
}
dispatch(action)
},
btnClick(){
const action={
type:'btn_click'
}
dispatch(action)
},
itemDelete(e){
console.log(e);
}
}
}
/*让TodoListu与store做链接,规则在mapStateToProps里边*/
export default connect(mapStateToProps,mapDispatchToProps)(TodoList);