redux 更进一步

当内容逐渐增多, 我的reducer渐渐的庞大了起来, 而且各个组件的方法, 变量, 都这这一个reducer里面. 当我需要修改某个方法的时候, 我可能要找上很久. 这时候分而治之就显得很有必要了

我在 store 文件夹下又创建了两个文件夹, 分别命名为 actions 和 reducers 目的就是希望对于每个组件, 都用他自己独立的 action 和 reducer 来管理. 还创建了actionTypes.js, 用来声明不同 action 的类型

image.png

在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文件里怎么看都不是一个好的选择.

image.png

创建一个 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>
            </>
        );
    }
}