1.安装react-redux
yarn add react-redux
2.创建TodoList.js
import Reac, { Component } from 'react' ;
class TodoList extends Component{
render() {
return (
<div>
<div>
<input />
<button>提交</button>
</div>
<ul>
<li>Dell</li>
</ul>
</div>
)
} }
export default TodoList;
3.创建store文件夹及index.js文件
import { createStore} from 'redux';
const store = createStore();
export default store;
4.创建reducer并在store中引入reducer
import reducer from './reducer'
reducer.js
const defaultState = {
inputValue:'',
list:[]
}
export default (state = defaultState, action) => {
return state;
}
5.使用store里的数据
之前我们会在TodoList中引入store，并使用constructor获取store里的数据，如下
constructor(props) {
super(props);
this.state = store.getState();
}
<input value={this.state.inputValue} />
现在用react-redux写
到项目的index.js中使用Provider
import { Proviter } from 'react-redux' ;
import store from './store';
//定义一个App的组件
const App = （
//Proviter是react-redux提供的一个核心API
<Provider store={store}>//Proviter提供器连接了store，那么Proviter里的所有组件都有能力获取store的内容了，所以TodoList就有能力获取store的内容了
<TodoList />
</Provider>
）;
ReactDOM.render(APP, document.getElementById('root'));
6.到TodoList组件中使用react-redux里的connect方法获取store里的数据
import { connect }from 'react-redux' ;
让TodoList组件和store进行连接
export default connect (null, null)(TodoList) ;
从而衍生出连接方式如下
const mapStateToProps = (state) => {
return {
inputValue: state.inputValue //state里面的inputValue会映射到组件的props的inputValue里面去
}
}
//让TodoList和store做连接，做连接就有规则，规则在mapStateToProps里
export default connect (mapStateToProps, null)(TodoList) ;
这时可以改写为<input value={this.props.inputValue} />
现在改input添加一个onChange方法
//把store的dispatch方法挂载到props上
const mapDispatchToProps = (dispatch) => {
return {
}
}
export default connect(mapStateToProps,mapDispatchToProps)(Todolist);
所以就可以用this.props去掉用dispatch方法
<input
value={this.props.inputValue}
onChange={this.props.changeInputValue}
/>
changeInputValue函数指的就是mapStateToProps里的changeInputValue方法
const mapDispatchToProps = (dispatch) => {
return {
changeInputValue(e){
const action = {
type:'change_input_value',
value:e.target.value
}
dispatch(action)//dispatch把action转发给reducer
}
}
}
Todolist完整代码：
import React, {Component} from 'react';
import {connect} from 'react-redux';
class TodoList extends Component{
render() {
return(
<div>
<div>
<input
value={this.props.inputValue}
onChange={this.props.changeInputValue}
/>
<button>提交</button>
</div>
<ul>
<li>Dell</li>
</ul>
</div>
)
}
}
const mapStateToProps = (state) => {
return{
inputValue:state.inputValue
}
}
const mapDispatchToProps = (dispatch) => {
return {
changeInputValue(e){
const action = {
type:'change_input_value',
value:e.target.value
}
dispatch(action)
}
}
}
export default connect(mapStateToProps,mapDispatchToProps)(TodoList);
7.reducer中处理action
export default (state = defaultState, action) => {
if (action.type === 'change_input_value'){
const newState = JSON.parse(JSON.stringify(state));
newState.inputValue = action.value;
return newState;
}
