Redux 深入浅出：如何处理复杂数据流-JavaScript中文网-JavaScript教程资源分享门户

在现代的 Web 应用程序中，复杂的数据流是很常见的。Redux 是一个流行的状态管理库，它能够帮助我们有效地处理这些复杂的数据流。在本文中，我们将深入了解 Redux，讨论其核心概念、基本工作流程和如何处理复杂数据流。

Redux 的核心概念

Redux 的核心概念包括：

Store：集中存储应用程序的状态。
Action：描述事件的 plain object，它包含有关事件发生的全部信息。
Reducer：一个纯函数，它负责接受一个之前的 state，一个 action，然后返回新的 state。
Dispatch：一个函数，可以将 action 发送到 store。
Subscribe：一个函数，可以注册监听器，以便在 store 中发生更改时更新 UI。

在 Redux 中，我们的整个应用程序状态都保存在一个单一的 store 中。

Redux 的工作流程

Redux 的工作流程可以总结为以下三个步骤：

UI 发生了某些事件，例如用户单击了一个按钮。
这个事件创建了一个 action。
这个 action 变成了一个新的状态，并且这个状态被保存在 store 中。

Redux 应用程序的实际工作流程如下：

初始状态

const initialState = {
    count: 0,
    todos: []
};

定义 action 类型和生成 action 的函数

// javascriptcn.com 代码示例
const INCREMENT = 'INCREMENT';
const ADD_TODO = 'ADD_TODO';

function increment(amount) {
    return {
        type: INCREMENT,
        payload: amount
    };
}

function addTodo(text) {
    return {
        type: ADD_TODO,
        payload: text
    };
}

定义 reducer

// javascriptcn.com 代码示例
function reducer(state = initialState, action) {
    switch (action.type) {
        case INCREMENT:
            return {
                ...state,
                count: state.count + action.payload
            };
        case ADD_TODO:
            return {
                ...state,
                todos: [...state.todos, action.payload]
            };
        default:
            return state;
    }
}

创建 store
```
const store = createStore(reducer);
```

更新状态

store.dispatch(increment(5)); // { count: 5, todos: [] }

store.dispatch(addTodo('Learn Redux')); // { count: 5, todos: ['Learn Redux'] }

订阅状态更改

// javascriptcn.com 代码示例
function render() {
    const state = store.getState();

    console.log(state.count, state.todos);
}

store.subscribe(render);

store.dispatch(increment(1)); // 6, ['Learn Redux']

如何处理复杂数据流

在 Redux 应用程序中，我们通常会遇到需要处理复杂数据流的场景。以下是一些处理复杂数据流的技巧。

在 reducer 中处理嵌套数据

为了处理嵌套的数据结构，我们需要使用 immutable.js 或者一个纯对象来存储新的状态。

下面是一个使用 immutable.js 的例子：

// javascriptcn.com 代码示例
import { Map } from 'immutable';

const initialState = Map({
    user: Map({
        name: 'Tom',
        age: 18
    }),
    todos: Map({
        1: Map({
            id: 1,
            text: 'Learn Redux'
        }),
        2: Map({
            id: 2,
            text: 'Eat Dinner'
        })
    })
});

function reducer(state = initialState, action) {
    switch (action.type) {
        case UPDATE_USER_NAME:
            return state.setIn(['user', 'name'], action.payload.name);
        case ADD_TODO:
            const todo = Map({
                id: action.payload.id,
                text: action.payload.text
            });

            return state.setIn(['todos', action.payload.id], todo);
        default:
            return state;
    }
}

使用 middleware 处理异步操作

Redux 状态更新必须是同步的，但是在实际应用程序中，我们通常需要处理异步操作，例如向服务器发送请求。

Redux 提供了 middleware 机制来处理异步操作。一个常见的 middleware 是 redux-thunk，它允许我们在 action 中返回一个函数，而不是一个 plain object。这个函数可以包含一些异步操作，并创建一个新的 action。

下面是一个使用 redux-thunk 的例子：

// javascriptcn.com 代码示例
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

const initialState = {
    isLoading: false,
    todos: []
};

function fetchTodos() {
    return dispatch => {
        dispatch({ type: FETCH_TODOS_PENDING });

        fetch('/api/todos')
            .then(response => response.json())
            .then(todos => {
                dispatch({
                    type: FETCH_TODOS_SUCCESS,
                    payload: todos
                });
            })
            .catch(error => {
                dispatch({
                    type: FETCH_TODOS_FAILURE,
                    payload: error
                });
            });
    };
}

function reducer(state = initialState, action) {
    switch (action.type) {
        case FETCH_TODOS_PENDING:
            return {
                ...state,
                isLoading: true
            };
        case FETCH_TODOS_SUCCESS:
            return {
                ...state,
                isLoading: false,
                todos: action.payload
            };
        case FETCH_TODOS_FAILURE:
            return {
                ...state,
                isLoading: false,
                error: action.payload
            };
        default:
            return state;
    }
}

const store = createStore(reducer, applyMiddleware(thunk));

使用多个 reducer 处理不同的状态

当我们的应用程序变得更加复杂时，我们可以使用多个 reducer 来处理不同的状态。我们可以给每个 reducer 指定一个子状态树，并将它们合并成一个大的状态树。这个过程可以使用 combineReducers 函数来完成。

下面是一个使用多个 reducer 的例子：

// javascriptcn.com 代码示例
import { combineReducers, createStore } from 'redux';

const todosInitialState = {
    todos: []
};

function todosReducer(state = todosInitialState, action) {
    switch (action.type) {
        case ADD_TODO:
            return {
                ...state,
                todos: state.todos.concat({
                    text: action.payload.text,
                    completed: false
                })
            };
        default:
            return state;
    }
}

const visibilityFilterInitialState = {
    visibilityFilter: 'SHOW_ALL'
};

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

const rootReducer = combineReducers({
    todos: todosReducer,
    visibilityFilter: visibilityFilterReducer
});

const store = createStore(rootReducer);

结论

在本文中，我们深入探讨了 Redux 的核心概念、基本工作流程和如何处理复杂数据流。我们讨论了如何在 reducer 中处理嵌套数据、使用 middleware 处理异步操作以及使用多个 reducer 处理不同的状态。这些技巧可以帮助我们构建更加复杂的 Web 应用程序。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64f9cd23f6b2d6eab312f705