redux 在 react 中的理解及应用

绝地灬酷狼 2023-03-13 02:58 57阅读 0赞

#### 一、redux 的基础概念 ####

1.  `redux`是专门做状态管理的独立第3方库, 不是`react`插件。`redux` 对应用中状态进行集中式的管理(写/读)，也可以与`react-redux`、`redux-thunk`等插件配合使用。
2.  `redux`核心概念
    
    > action:
    
        默认是对象(同步action), {type: 'xxx', data: value}, 需要通过对应的actionCreator产生
        它的值也可以是函数(异步action), 需要引入redux-thunk才可以
    
    > reducer
    
        根据老的state和指定的action, 返回一个新的state
        不能修改老的state
    
    > store
    
        redux最核心的管理对象
        内部管理着: state 和reducer
        提供方法: getState(), dispatch(action), subscribe(listener)
3.  `redux` 设计和使用的三项原则

*  `store`是唯一的
 *  只有 `store` 能够去改变自己的内容  
    \-`reducer` 函数必须是纯函数

1.  `redux`的常用 `API`

*  `createStore`
 *  `store.dispatch`
 *  `store.getState`
 *  `store.subscribe`

1.  `redux` 的工作流：

*  `react` 想改变 `store` 里面的数据，先要派发一个 `action`， `action`会通过 `dispatch`方法传递给 `store`，`store`就会把之前的数据和 `action` 转发给 `reducer`
 *  `reducer`是一个函数，接收到了 `state`和 `action` 之后，就会进行处理，返回新的 `state` 给 `store`， `store` 用这个新的 `state` 替换掉之前的 `store` 里面的数据
 *  `store` 里面的数据发生改变以后，`react` 里面就会感知到 `store` 发生改变， `react` 就会从 `store` 里面重新取数据，更新组件的内容，页面就会发生变化
 *  **如图所示**：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70_pic_center]

1.  `UI` 组件负责页面的渲染，容器组件负责页面的逻辑。无状态组件，只有 `render` 函数，可以使用无状态组件，性能更优。

#### 二、redux 在 react 项目中的具体应用 ####

1.  通过 `npm i redux` 命令下载 `redux`
2.  在 `react` 项目中建立 `store` 文件夹，在里面建立 `index.js` 文件，引入 `redux` 和 `reducer` 文件，创建 `store` 并且暴露出去，代码如下所示：

import {  createStore } from 'redux'
    import reducer from './reducer'
    
    const store = createStore(
        reducer,
        window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
    )
    
    export default store

1.  建立 `actionType.js` 文件，定义一些需要使用的 `action` 类型，代码如下所示：

export const CHANGE_INPUT_VALUE  ='change_input_value';
    export const CHANGE_TODO_ITEM  = 'change_todo_item';
    export const DELETE_TODO_ITEM  = 'delete_todo_item';
    export const INIT_LIST_ACTION = 'init_list_action';

1.  建立 `actionCreators.js` 文件，在里面进行引入常量类型，创建 `action`，`action` 可以是一个对象，也可以是一个函数，代码如下所示：

import {  CHANGE_INPUT_VALUE, CHANGE_TODO_ITEM, DELETE_TODO_ITEM, INIT_LIST_ACTION } from './actionTypes.js'
    
    export const getInputValueAction = (value) => ({ 
        type: CHANGE_INPUT_VALUE,
        value
    })
    
    export const getTodoItem = () => ({ 
        type: CHANGE_TODO_ITEM
    })
    
    export const getDeleteTodoItem = (index) => ({ 
        type: DELETE_TODO_ITEM,
        index
    })
    
    export const getInitListAction = (data) => ({ 
        type: INIT_LIST_ACTION,
        data
    })

1.  创建 `reducer.js` 文件，引入 `action`，定义一些需要使用到的 `state`，创建 `reducer`。`reducer` 可以接收 `state`，但是不能够修改 `state`,只有 `store` 能改变自己的内容。`reducer` 是纯函数，给定固定的输入，就一定有固定的输出，而且不会有副作用。当 `action` 类型相等时，需要进行 `state` 的值的拷贝，代码如下所示：

import { CHANGE_TODO_ITEM, CHANGE_INPUT_VALUE, DELETE_TODO_ITEM, INIT_LIST_ACTION} from './actionTypes.js'
    
    const defaultState = { 
        inputValue: '',
        list: []
    }
    
    export default (state = defaultState, action) => { 
        if (action.type === CHANGE_INPUT_VALUE) { 
            const newState = JSON.parse(JSON.stringify(state))
            newState.inputValue = action.value
            return newState
        }
    
        if (action.type === CHANGE_TODO_ITEM) { 
            const newState = JSON.parse(JSON.stringify(state))
            newState.list.push(newState.inputValue)
            newState.inputValue = ''
            return  newState
        }
    
        if (action.type === DELETE_TODO_ITEM) { 
            const newState = JSON.parse(JSON.stringify(state))
            newState.list.splice(action.index, 1)
            return newState
        }
    
        if (action.type === INIT_LIST_ACTION) { 
            const newState = JSON.parse(JSON.stringify(state))
            newState.list = action.data
            return newState
        }
        return state
    }

1.  在页面中，需要引入 `store`，在 `constructor` 中，使用 `store.subscribe` 订阅监听 `store` 的改变，当 `store` 改变后就会执行一次 `handleStoreChange`，最好通过 `store.dispatch` 去使用 `action`，代码如下所示：

import React, {  Component } from 'react'
    import 'antd/dist/antd.css'
    import store from './store'
    import { getInputValueAction, getTodoItem, getDeleteTodoItem,  getTodoList } from './store/actionCreators.js'
    import TodoListUI from './TodoListUI.js'
    
    
    class TodoList extends Component { 
    
        constructor (props) { 
            super(props)
            this.state = store.getState()
            this.handleInputValue = this.handleInputValue.bind(this)
            this.handleStoreChange = this.handleStoreChange.bind(this)
            this.handleClick = this.handleClick.bind(this)
            this.handleItemDelete = this.handleItemDelete.bind(this)
            store.subscribe(this.handleStoreChange)
        }
    
        render () { 
            return (
                
                <TodoListUI inputValue={ this.state.inputValue} list={ this.state.list} handleInputValue={ this.handleInputValue} handleClick={ this.handleClick} handleItemDelete={ this.handleItemDelete}></TodoListUI>
            )
        }
    
        componentDidMount () { 
            const action = getTodoList()
            store.dispatch(action)
        }
    
    
        handleInputValue (e) { 
            const action = getInputValueAction(e.target.value)
            store.dispatch(action)
        }
    
    
        handleStoreChange () { 
            this.setState(store.getState())
        }
    
        
        handleClick () { 
            const action = getTodoItem()
            store.dispatch(action)
        }
    
    
        handleItemDelete (index) { 
            const action = getDeleteTodoItem(index)
            store.dispatch(action)
        }
    
    }
    
    export default TodoList

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20230312/2587f3bef1a546909097f4e1ed5b7f6c.png