Store的创建和优化

怎么样创建一个store呢。下面我来简述一下store的创建以及优化。

在我们项目中的src目录下创建一个Store文件夹，再在Store中创建index.js和reducer.js文件

store/index.js

import { createStore } from 'redux';//引入createStore
import reducer from './reducer';//引入reducer(小册子)

const store = createStore(
	reducer, 
	window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);//创建一个store，第一个参数是reducer,第二个参数是在浏览器中显示的参数

export default store;

store/reducer.js

const defaultState = {
	inputValue: '',
	list: []
}//数据存储的位置

// reducer 可以接受state，但是绝不能修改state
export default (state = defaultState, action) => {//reducer导出一个函数
	if (action.type === 'change_input_value') {//根据action的类型来操作数据
		const newState = JSON.parse(JSON.stringify(state));//深拷贝
		newState.inputValue = action.value;
		return newState;//把修改过后的数据返回给Store
	}
	return state;
}

src/Todolist.js

store.subscribe(this.handleStoreChange);
//constructor中用来检测store变化了就重新获取store中数据的语句
//获取了数据再重新渲染页面
handleStoreChange() {
        this.setState(store.getState());
    }//上面调用的方法，以下方法this指向都在constructor中做了绑定
handleInputChange(e) {
		const action = {//创建一个action
			type: 'change_input_value',//action类型
			value: e.target.value//传递要改变的数据
		}
		store.dispatch(action);//发送action请求
	}

以上简单的store就创建好了。

存在以下问题

1.当action变得很多的时候就会让这个Todolist文件代码量很多，不方便维护
2.当action的type中的字符串，index.js文件和reducer.js文件没有对应上时，浏览器不仅不会展示正常的功能，而且也不会报错，就让我们的改错不方便。

解决：
1.创建一个actionCreators.js来创建action，避免Todolist.js中代码量太多。
2.创建一个actionTypes.js来管理type。

actionCreators.js

import { CHANGE_INPUT_VALUE } from './actionTypes';
//从actionTypes引入的变量

export const getInputChangeAction = (value) => ({
	type: CHANGE_INPUT_VALUE,
	value
});

actionTypes.js

export const CHANGE_INPUT_VALUE = 'change_input_value';

store/reducer.js修改的部分

import { CHANGE_INPUT_VALUE } from './actionTypes';//引入这个变量
export default (state = defaultState, action) => {
	if (action.type === CHANGE_INPUT_VALUE) {//修改部分
		const newState = JSON.parse(JSON.stringify(state));
		newState.inputValue = action.value;
		return newState;
	}

Todolist.js中handleInputChange方法修改

import { getInputChangeAction } from './store/actionCreators'
//从actionCreators.js中引入这个方法
handleInputChange(e) {
		const action = getInputChangeAction(e.target.value);
		//调用这个方法
		store.dispatch(action);
	}

把代码改成这样，就解决了
1.Todolist.js中代码太多不好维护，并且把action放到一起，好管理。
2.type拼写出错也会报错