当内容逐渐增多, 我的reducer渐渐的庞大了起来, 而且各个组件的方法, 变量, 都这这一个reducer里面. 当我需要修改某个方法的时候, 我可能要找上很久. 这时候分而治之就显得很有必要了
我在 store 文件夹下又创建了两个文件夹, 分别命名为 actions 和 reducers 目的就是希望对于每个组件, 都用他自己独立的 action 和 reducer 来管理. 还创建了actionTypes.js, 用来声明不同 action 的类型
在actions里面, 我放进去了组件的事件处理函数, 例如counter.js
import { COUNT_ADD } from '../actionTypes'
export const getCountAddAction = (value) => {
return {
type: COUNT_ADD,
value
}
}
注意到里面引入了一个 COUNT_ADD 这个字符串标明了 store 中 action 的类型, 相当于是某个函数的 id.
再例如 todoList.js:
import { CHANGE_TITLE, DELETE_TODO_ITEM, ADD_TODO_ITEM } Types from "../actionTypes";
export const changeTitle = (value) => {
return {
type: CHANGE_TITLE,
value
}
}
export const deleteItem = (index) => {
return {
type: DELETE_TODO_ITEM,
index
}
}
export const addItem = (title) => {
return {
type: ADD_TODO_ITEM,
title
}
}
这里就导入了所有此组件需要的 action 类型.
actionTypes.js长这个样子:
export const CHANGE_TITLE = 'CHANGE_TITLE'
export const ADD_TODO_ITEM = 'ADD_TODO_ITEM'
export const DELETE_TODO_ITEM = 'DELETE_TODO_ITEM'
export const COUNT_ADD = 'COUNT_ADD'
好, 以上所有是 action 相关.
reducer 是状态的管理者. 但是多个组件肯定有多个 reducer, 全部放在一个 reducer文件里怎么看都不是一个好的选择.
创建一个 index.js 将所有组件的 reducer 全部导入进来, 然后合并后导出出去. 在 store.js 中使用
// Counter.js
import { COUNT_ADD } from '../actionTypes'
const initState = {
count: 0
}
export default (state = initState, action) => {
const newState = JSON.parse(JSON.stringify(state))
switch (action.type) {
case COUNT_ADD:
newState.count = newState.count + action.value
return newState
default:
return newState
}
}
// TodoList.js
import * as Types from '../actionTypes'
const initState = {
title: '',
list: [],
}
export default (state = initState, action) => {
const newState = JSON.parse(JSON.stringify(state))
switch (action.type) {
case Types.CHANGE_TITLE:
newState.title = action.value
return newState
case Types.ADD_TODO_ITEM:
newState.list.push(action.title)
newState.title = ''
return newState
case Types.DELETE_TODO_ITEM:
newState.list.splice(action.index, 1)
return newState
default:
return newState
}
}
关键的 index.js. redux 提供了一个方法 combineReducers 这个方法可以用来合并多个 reducer. 合并之后导出
import { combineReducers } from 'redux'
import todoList from './TodoList'
import counter from './Counter'
export default combineReducers({
todoList,
counter
})
store.js:
import { createStore } from 'redux'
import reducer from './reducers/index'
const store = createStore(
reducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)
export default store
至此, 关于 redux 的所有配置都已经完成. 接下来的事情, 就是在组件里面使用了.
以 TodoList为例:
要使用 redux , 首先应该导入 store, 上面TodoList的所有 action
import store from '../store/index'
import * as Action from '../store/actions/todoList'
当组件挂载完成的时候, 订阅 store 中的 state. 一旦改变, 将会立即更新.
componentDidMount() {
store.subscribe(() => {
this.setState(store.getState().todoList)
})
}
由于 reducer 里面是合并了的, 所以 state 里面有两个对象 todoList 和 counter. 故应该通过 getState().todoList的方式, 获取到对应的 state.
然后就是根据业务逻辑, 进行事件的 dispatch 了.
根据不同的功能, 使用不同的 action 然后 dispatch 这个 action.
完整代码:
import React from 'react'
import store from '../store/index'
import * as Action from '../store/actions/todoList'
export default class TodoList extends React.Component{
state = store.getState().todoList
handleChange = (e) => {
const action = Action.getChangeTitleAction(e.target.value)
store.dispatch(action)
}
componentDidMount() {
store.subscribe(() => {
this.setState(store.getState().todoList)
})
}
handleAddItem = () => {
const action = Action.getAddItemAction(this.state.title)
store.dispatch(action)
}
deleteItem = (index) => {
const action = Action.getDeleteItemAction(index)
store.dispatch(action)
}
render() {
return (
<>
<div>
<input type="text" value={ this.state.title } onChange={ this.handleChange }/>
<button onClick={this.handleAddItem}> Add </button>
</div>
<ul>
{
this.state.list.map((item, index) => {
return (
<li key={item+index}>
<span>{item}</span>
<button onClick={ () => this.deleteItem(index) }> delete </button>
</li>
)
})
}
</ul>
</>
);
}
}
