redux - redux 如何使用一个简单的示例(与 React 无关)？

Question

已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足 Stack Overflow guidelines 。目前不接受答案。

---

我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题，以便用事实和引文来回答。

已关闭 2 年前。

Improve this question

我看过很多 redux 示例，并且知道它用于状态管理，但我读得越多，它就变得越困惑。有人可以简单地放置 redux 示例来理解目的来演示它是如何工作的吗？

Answer 1

正如您所提到的，您已经经历过 redux 并知道它的用途，让我用一个非常简单的示例向您演示它，该示例具有隔离性，无需任何框架。

最简单的例子(我想到的)

const {createStore} = require('redux');

const initialState = {
    name : "faisal"
}
const mReducer = (state = initialState,action)=>{
    const newState = {...state};
    if(action.type==="QAIS"){
        newState.name = "Qais";
    }

    if(action.type==="AZHAR"){
        newState.name = "Azhar";
    }
    return newState;
};

const mSubscriber = ()=>{
    console.log("Name : "+store.getState().name);
}

const store = createStore(mReducer);
store.subscribe(mSubscriber);
store.dispatch({type:"QAIS"});
store.dispatch({type:"AZHAR"});
store.dispatch({type:"ASAD"});

正如您从示例中可以观察到的，一个简单的存储包含 Reducer，它是负责根据其接收到的操作更改状态的方法。

和一个监听状态变化的订阅者。

我们所要做的就是使用您的Reducer 创建Store 并订阅存储。它的观察者模式正在观察变化状态。最后尝试通过分派(dispatch)来存储操作，一旦它们被分派(dispatch)，Reducer 就会开始操作并修改订阅者观察到的状态。 :) 很简单。