React 状态管理面试题, Redux 的 action 是什么?如何在 Redux 中定义 action?

Step 1

Q:: 什么是 Redux 中的 action？

A:: 在 Redux 中，action 是一个普通的 JavaScript 对象，它描述了发生了什么。每个 action 对象都必须包含一个 type 字段，这个字段通常是一个字符串，描述 action 的类型。其他字段可以包括任何相关数据，例如一个 payload 字段，包含了与这个 action 相关的数据。action 是 Redux 数据流的核心部分，它们是改变应用程序状态的唯一途径。

Step 2

Q:: 如何在 Redux 中定义 action？

A:: 在 Redux 中，定义 action 非常简单，只需要创建一个对象并赋值给 type 字段即可。例如：{ type: 'ADD_TODO', payload: { text: 'Learn Redux' } }。此外，你可以使用 action creator 函数来更结构化和模块化地定义 action。action creator 是一个返回 action 对象的函数，比如：const addTodo = text => ({ type: 'ADD_TODO', payload: { text } });。

Step 3

Q:: 如何在 Redux 中处理异步 action？

A:: Redux 通过中间件（middleware）处理异步操作。Redux Thunk 是一个常用的中间件，它允许你在 action creator 中返回一个函数而不是一个对象。这个函数可以执行异步操作（例如 API 调用），然后在异步操作完成后 dispatch 一个普通的同步 action。例如：const fetchData = () => dispatch => { fetch('/data').then(response => response.json()).then(data => dispatch({ type: 'FETCH_SUCCESS', payload: data })); };

Step 1

Q:: Redux 的 action 是什么？

A:: 在 Redux 中，action 是描述要发生的事情的对象。每个 action 都必须有一个 type 字段来指明这个 action 的类型，通常是一个字符串常量。其他字段可以携带附加信息，以便 reducer 能根据这些信息更新状态。action 是 Redux 架构中进行状态更新的唯一方法。

Step 2

Q:: 如何在 Redux 中定义 action？

A:: 定义一个 action 很简单，只需要创建一个 JavaScript 对象，并确保它具有一个 type 属性。通常会定义 action creator 函数来返回这个 action 对象。比如：

 
const ADD_TODO = 'ADD_TODO';
const addTodo = (text) => ({
    type: ADD_TODO,
    payload: text
});
 

这里的 ADD_TODO 是 action 的 type，而 payload 是附加信息，用于描述需要添加的任务。

Step 3

Q:: 什么是 action creator？为什么要使用它？

A:: action creator 是一个函数，目的是创建并返回 action 对象。通过使用 action creator，可以确保创建的 action 对象结构一致且减少硬编码的重复。使用 action creator 还可以提高代码的可维护性和可读性。

例如：

 
const addTodo = (text) => ({
    type: 'ADD_TODO',
    payload: text
});
 

Step 4

Q:: 如何在 Redux 中处理异步 action？

A:: Redux 本身处理的是同步 action，但在实际应用中，往往需要处理异步操作，比如网络请求。为了解决这个问题，通常使用 Redux middleware，例如 redux-thunk 或 redux-saga。

使用 redux-thunk 时，可以定义一个返回函数的 action creator，这个函数接收 dispatch 作为参数，并在其中处理异步操作。

例如：

 
const fetchData = () => {
    return (dispatch) => {
        fetch('https://api.example.com/data')
            .then(response => response.json())
            .then(data => dispatch({ type: 'FETCH_SUCCESS', payload: data }))
            .catch(error => dispatch({ type: 'FETCH_FAILURE', error }));
    };
};
 

Step 5

Q:: 什么是 reducer？它和 action 的关系是什么？

A:: reducer 是一个纯函数，它接收当前的 state 和 action，并返回一个新的 state。reducer 是 Redux 的核心部分之一，负责根据不同的 action 类型来决定如何更新 state。

例如：

 
const initialState = { todos: [] };
 
function todoReducer(state = initialState, action) {
    switch(action.type) {
        case 'ADD_TODO':
            return { ...state, todos: [...state.todos, action.payload] };
        default:
            return state;
    }
}