Redux基本使用和实践

2023年6月22日 · 阅读需 3 分钟

Redux的核心是store，store作为应用状态的容器，保存着这个页面的状态数据树。

store

但是store本质上是一个JavaScript对象，这个对象含有了dispatch以及获取页面状态数据的方法等等。

store提供几个方法给开发者调用：

dispatch(action)：派发action；
subscribe(listener)：订阅页面状态数据，也就是store中的state；
getState：获取当前页面状态数据树；
replaceReducer(nextReducer)：这个方法很少使用到。

当应用引入Redux后，通过redux.createStore方法来创建应用的store，这就生成一个对象实例。比如：

    import {createStore}  from  'redux';
    const store = createStore(reducer,preloadedState,enhancer);

参数reducer是必传参数，创建store的同时，也必须定义好reducer函数，通过reducer函数，来通知store数据状态是如何根据action来进行更新的。

preloadedState：是应用的初始状态。

action

action是描述了状态变更的信息，通过dispatch来派发。redux规定了action对象需要有一个type属性，来保证action的唯一性。

除此之外，action可以携带其他数据信息，这些数据信息的属性就没有限制了。比如：

const action = {
    type: "AAA",
    data: {
        name:"aaa"
    }
}

一般情况下，action携带的信息，是页面动态输入的，所以我们可以定义action相关的函数：

const action = data=>({type:"AAA",data});

之后就通过dispatch来派发action，代码如下：

store.dispatch(action(908));

由此可以看出，action就是描述了一个状态变化，这个状态包含了type属性和变化的信息。

然而，真正将这些变化转为数据状态的是reducer函数。reducer必须是一个纯函数，来保证数据变化的可预测性。比如现在要定义一个变更状态的函数：changesState()。

const changesState = (prevState={},action)=>{
    switch(action.type){
        case:'AAA':
            return:action.data
        default:
            return prevState;
    }
}

一般情况下，reducer函数会处理多了action。

这就是Redux基本使用。

store​

action​

store

action