react-基础操作（6）状态管理以及redux

2020-04-04

字数统计: 1k字 | 阅读时长≈ 4分

概念

源码在我的github地址react-tuts-04

Redux把Flux与函数式编程结合在一起

Flux

redux官网

如果UI层很简单，就不用Redux

需要Redux的项目：

不同身份的用户有不同的使用方式（用户和管理员）

多个用户之间可以协作

与服务器大量交互，或者使用了WebSocket

View要从多个来源获取数据

从组件层面考虑：

某个组件状态需要共享

一个组件需要改变全局状态

一个组件需要改变另一个组件的状态

Redux原理图

一般来说流程是这样的：

用户触发页面上的某种操作，通过 dispatch 发送一个 action。
Redux 接收到这个 action 后通过 reducer 函数获取到下一个状态。
将新状态更新进 store，store 更新后通知页面重新渲染。

从这个流程中不难看出，Redux 的核心就是一个 发布-订阅 模式。一旦 store 发生了变化就会通知所有的订阅者，view 接收到通知之后会进行重新渲染。

自制Redux

因此我们可以自己实践一下

新建redux-principle.html，！+Tab新建网页，添加buttom按钮，静态网页界面。
获取界面上的数字，设置countState；同时编写changeState(state,action)函数，其中state由createStore(changeState)创建，createStore会return三个值getState, dispatch,subscribe，getState是为了返回当前state的状态，（第一次的话就是初始化时候是null）dispatch是为了获changeState执行后state的值，subscribe是为了增加监听器里的数据。
dispatch 和 action 是息息相关的，只有通过 dispatch 才能发送 action。而发送 action 之后才会执行 subscribe 监听到的那些方法。所以 dispatch 做的事情就是将 action 传给 reducer 函数，将执行后的结果设置为新的 store，然后执行 listeners 中的方法。
编写renderCount()，通过每个store.getState()获取state，再渲染数字的数值。执行renderCount()，如果有多个 action 同时发送，这样很难说清楚最后的 store 到底是什么样的，所以需要加锁。在 Redux 中 dispatch 执行后的返回值也是当前的 action，所以还需要store.subscribe(renderCount)。

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自制redux</title>
</head>
<body>
    <div>
    <button onclick="store.dispatch({type:'JIAN',n:2})">-</button>
        <span id="countDisplay">10</span>
    <button onclick="store.dispatch({type:'JIA',n:3})">+</button>
    </div>
    <script>
        const countDisplay = document.querySelector('#countDisplay')
        const countState = {
            count:5
        }
       

        const changeState = (state,action) =>{
            if(!state){
                return countState
            }
            switch(action.type) {
                case 'JIAN':
                    return{
                        ...state,
                        count: state.count - action.n
                    }
                case 'JIA':
                return{
                        ...state,
                        count: state.count + action.n
                    }
                default:
                    return state
            }
        }


        const createStore = (changeState) => {
            let state = null
            const getState = () => state
            const listeners = []
            const subscribe = (listener) => listeners.push(listener)
            const dispatch= (action) => {
                state = changeState(state,action)
                listeners.forEach(listener =>listener())
            }
            dispatch({})
            return{
                getState,
                dispatch,
                subscribe
            }
        }

        const store = createStore(changeState)

        const renderCount = () =>{
            countDisplay.innerHTML= store.getState().count
        }

        renderCount()

        store.subscribe(renderCount)
    </script>
</body>
</html>

使用Redux组件

npm i redux -S
建立reducers文件夹，用combineReducers统一导出reducers里的组件；

每个组件首先要定义一个初始的状态，然后export default｛state,action｝，包括default以及各种情况。
把状态导入store，把store引入组件
创建action，把actionType定义好，统一导出actions里的组件；

一般是一个方法，这样在视图里调用时候可以写参数，在哪里用action直接在components的组件里引用store.dispatch(方法名)。
如果想修改数据时候同时修改视图层，那么需要在reducers里完善步骤2里的各种情况。
如果步骤5里设置完没有响应，那可能是没有设置监听器subscribe

PS：

无副作用修改原数组

var obj = {x:1,y:2,z=2}
//方法一
var obj1=Object.assign({},obj,{z:4,a:5})
//方法二
var obj2={...obj,z:44,a:55}
//方法三
var arr={'a','b','c'}
arr2=arr.slice()

本文作者： Raphael_Li
本文链接： https://lifei-2019.github.io/react8/
版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！