redux手动实现之二store

发表于 | 分类于 | 本文总阅读量 次 | 字数统计: 496 字 | 阅读时长 ≈ 2 分钟
redux在现在前端开发中是必须要了解学习的，通过模拟思路是一种极好的学习方式

上一节通过 dispatch 控制了对共享数据 appState 操作的渠道，这种模式可以很好的解决共享数据修改难以排查的问题，现在我们再做一次抽离，使这种模式可以很好的复用到其他应用上。

构建一个函数叫createStore用来生成一个维护共享数据的中心store。

1
2
3
4
5
6
function createStore(state, stateChanger) {
    return {
        dispatch: (action) => stateChanger(state, action),
        getState: () => state
    };
}

createStore 接收两个参数 state 和 stateChanger， state 用于表示应用程序的状态，stateChanger 就是上一节的 dispatch 用于根据 action 的变化去操作 state。

createStore 会返回包含两个方法 getState 和 dispatch 的对象。getState 用于返回 state 参数，dispatch 用于修改数据，和之前不同的是它只接受一个参数 action，然后它会把 state 和 action 一并传给 stateChanger，那么 stateChanger 就可以根据 action 来修改 state 了。

现在使用 createStore 来修改上一节的代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>

<body>
    <div id='title'></div>
    <div id='content'></div>
    
    <script>
        const appState = {
            title: {
                text: "redux",
                color: "red",
            },
            content: {
                text: "redux文档内容",
                color: "blue"
            }
        };
        
        function stateChanger(state, action) {
            switch (action.type) {
                case "UPDATE_TITLE_TEXT": {
                    state.title.text = action.text;
                    break;
                }
                case "UPDATE_TITLE_COLOR": {
                    state.title.color = action.color;
                    break;
                }
                default:
                    break;
            }
        }
        
        // 添加 createStore
        function createStore(state, stateChanger) {
            return {
                dispatch: (action) => stateChanger(state, action),
                getState: () => state
            };
        }
        
        function renderTitle(title) {
            const titleDom = document.querySelector("#title");
            titleDom.innerHTML = title.text;
            titleDom.style.color = title.color;
        }
        
        function renderContent(content) {
            const contentDom = document.querySelector("#content");
            contentDom.innerHTML = content.text;
            contentDom.style.color = content.color;
        }
        
        function renderApp(appState) {
            renderTitle(appState.title);
            renderContent(appState.content);
        }
        
        // 生成 store
        let store = createStore(appState, stateChanger);
        renderApp(store.getState());
        // 三秒钟之后，修改标题和标题颜色，并重新渲染
        setTimeout(function () {
            store.dispatch({ type: "UPDATE_TITLE_TEXT", text: "Redux是React是好基友" });
            store.dispatch({ type: "UPDATE_TITLE_COLOR", color: "green" });
            renderApp(store.getState());
        }, 3000);
    
    </script>
</body>

</html>

参考

http://huziketang.mangojuice.top/books/react/