Action和Reducer的编写 - 增添功能

1、主体页面内容改造
接下来，我们使用 action 和 reducer ，来对这个组件的数据进行前后传递。首先，先来改造 TodoList.js 文件。具体代码如下：

import React, { Component } from 'react';
import 'antd/dist/antd.css';
import { Input, Button, List } from 'antd';
import store from './store';

class TodoList extends Component {
constructor(props) {
super(props);
this.state = store.getState()
this.handleInputChange = this.handleInputChange.bind(this)
this.handleStoreChange = this.handleStoreChange.bind(this)
this.handleBtnClick = this.handleBtnClick.bind(this)
store.subscribe(this.handleStoreChange)
}
render() {
return (
<div style={{marginTop: '10px', marginLeft: '10px'}}>
<div>
<Input
value={this.state.inputValue}
placeholder="todo info"
style={{ width: '300px', marginRight: '10px'}}
onChange={this.handleInputChange}
/>
<Button type="primary" onClick={this.handleBtnClick}>提交</Button>
</div>
<List
style={{marginTop: '10px', width: '300px'}}
bordered
dataSource={this.state.list}
renderItem={item => <List.Item>{item}</List.Item>}
/>
</div>
)
}

handleInputChange(e) {
// 在react中，action是一个对象的形式
// type旨在告诉react说，你帮我去改变input的值，这个值是下面的value，也就是e.target.value
const action = {
type: 'change_input_value',
value: e.target.value
}
store.dispatch(action)
// console.log(e.target.value)
}

handleStoreChange() {
// 当感知到store的数据发生变化时，那么就去调用store.getState方法，从store里面再重新取一次数据，
// 然后去调用setState，替换掉当前store里面的数据
this.setState(store.getState())
}

handleBtnClick() {
const action = {
type: 'add_todo_item'
}
store.dispatch(action)
}
}

export default TodoList;

接下来我们来分析以上代码。首先，每一个动作分别会先去绑定对应的事件，之后呢，在事件里面，去创造 action 。而对于创造的 action 来说，它旨在告诉 react ，让 react 去帮忙 action 去改变某个值，而这个值就是它绑定的 value 。前端培训

最后， action 要做的事情结束了，那么它的数据就需要去存储到 store 里面。于是通过 store.dispatch(action) 来进行处理，将 action 的数据传递到 store 里面。

2、改变action中的数据
对于 action 一开始的值来说，它是固定的。但有时候我们是想要去修改action中的值，这个时候就需要用到 reducer 。现在，我们来改造下 reducer.js 文件，让 input 框可以自由的输入值，同时，点击提交按钮之后，进行列表的增添操作。具体代码如下：

const defaultStore = {
inputValue: '123',
list: [1, 2]
};

// reducer 可以接收state，但是绝不能修改state
const reducer = (state = defaultStore, action) => {
if (action.type === 'change_input_value') {
const newState = JSON.parse(JSON.stringify(state));
newState.inputValue = action.value;
return newState;
}
if (action.type === 'add_todo_item') {
const newState = JSON.parse(JSON.stringify(state));
newState.list.push(newState.inputValue);
newState.inputValue = '';
console.log(newState);
return newState;
}
return state;
}
export default reducer;

3、store数据改造
下面，我们来看下 store 文件夹下 index.js 的内容。我们需要对其进行简单的改造，具体代码如下：

import { createStore } from "redux";
import reducer from './reducer';

const store = createStore(
reducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

export default store;

除了 reducer 之外，我们还要将 window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() 给传递进去并调用这个方法。