redux入门

August 10, 2022

store，以及概念

import { createStore } from "redux";

// store 是 redux 存储数据的地方
// reducer 函数用于描述数据如何改变（给定任意 action）
const store = createStore(reducer[, init]);
// state 对象表现了 store 的瞬时状态（快照）
const state = store.getState();
// action 对象会派发给 reducer 进行操作，携带了供 reducer 函数操作的信息
store.dispatch(action);
// 可以使用 listener 函数订阅 store 的变化
const unsubscribe = store.subscribe(listener);

action

// redux 中的 action 一般有如下结构
const ADD_TODO = "ADD_TODO";
const action_1 = {
    type: ADD_TODO,
    text: "Build my first Redux app",
};
// 为了简洁，以下直接使用字符串而不是常量作为type
const action_1 = {
    type: "ADD_TODO",
    text: "Build my first Redux app",
};
// 在redux中，为了方便生成一类 type 的 action，一般使用函数生成 action 如下
function addTodo(text) {
    return {
        type: "ADD_TODO",
        text,
    };
}
const action_1 = addTodo("Build my first Redux app");

reducer

reducer 是纯函数，描述 action 如何改变 state

const defaultState = {}; // 默认值是可选的，也可以在 createStore 函数中指定
// reducer 函数通过当前 state 和当前 action 计算出下一次的 state （并返回）
// 当前指的是 store.dispatch(action) 调用执行的前一刻
// 很明显，store.dispatch(action) 调用的内部提供了 reducer 函数需要的 state 和 action 参数
// 并且，在该调用完成之后，store.getState() 就反应计算后的 state 了
const reducer = (state = defaultState, action) => {
    switch (action.type) {
        case "ADD_TODO":
            return Object.assign({}, state, { currentTodo: action.text });
        // 不应修改 state 对象，应当认为 state 是只读的
        default:
            return state;
    }
};

结合之前的代码

const store = createStore(reducer, { currentTodo: "None" }); // 初始值可选
store.dispatch(addTodo("Build my first Redux app"));
const { currentTodo } = store.getState(); // => Build my first Redux app

如何保持 reducer 的纯洁性?

// 对于对象，除了使用 Object.assign 之外，还可以
return { ...state, replaceOrSetNewKey: value, ...orDestructAnotherObject };
// 对于数组，也可以使解构
return [...state, ...newState];
// 使用数组concat
return state.concat(newState);
// 总之，只要保证是纯函数即可

state

state 反映的 store 的当前状态，应当认为是只读的

const state = store.getState();

listener

listener 只是一个 store 变化就会触发的函数而已

const unsubscribe = store.subscribe(() => console.log("Current state is: ", store.getState()));
store.dispatch(addTodo("Store is changed"));
unsubscribe();

utils

combineReducers()

一个应用只能有一个 store，但在数据较多时将导致 reducer 函数臃肿
可以将 reducer 拆分为多个子 reducer（每个子 reducer 负责对应的属性），然后通过 combineReducers 函数合并

function todos(state = [], action) {
    switch (action.type) {
        case "ADD_TODO":
            return state.concat({
                text: action.text,
                completed: false,
            });

        case "TOGGLE_TODO":
            return state.map((todo, index) =>
                index === action.index ? { ...todo, completed: !todo.completed } : todo,
            );

        default:
            return state;
    }
}

function visibilityFilter(state = "SHOW_ALL", action) {
    switch (action.type) {
        case "SET_VISIBILITY_FILTER":
            return action.filter;
        default:
            return state;
    }
}

// 在不使用 combineReducers 工具函数时，可以这样写
function todoApp(state = {}, action) {
    return {
        visibilityFilter: visibilityFilter(state.visibilityFilter, action),
        todos: todos(state.todos, action),
    };
}

// 使用 combineReducers
import { combineReducers } from "redux";
const todoApp = combineReducers({
    visibilityFilter,
    todos,
});

// 注意，在合并子 reducer 时，完全可以将 子reducer 重命名为 reducer 的其它属性

←Back to home