Redux 是一个 JavaScript 应用程序状态管理工具，它是 React 生态系统中最常用的状态管理库之一。在 Redux 中，应用程序的状态被存储在一个单一的数据存储中心中，这可以让我们的应用程序更加可预测和易于维护。但是，Redux 开发也有许多坑需要注意，本文将介绍 Redux 开发中可能会遇到的各种坑，并提供相应的解决方案和示例代码。
1. 不要直接修改 Redux store 中的 state
Redux 中的 store 是一个不可变的对象。因此，我们不能直接修改 store 中的 state，而是需要通过 dispatch 一个 action 来修改 state。如果我们直接修改 store 中的 state，那么我们的应用程序将不可预测，并且可能会导致一些难以调试的错误。
// 错误的示范 store.state.name = 'Alice'
// 正确的示范 store.dispatch({ type: 'CHANGE_NAME', payload: 'Alice' })
2. 不要在 Redux reducer 中执行异步操作
Redux reducer 应该是一个纯函数，它只接受 state 和 action 作为输入，然后返回新的 state。因此，我们不能在 reducer 中执行异步操作，否则会导致 reducer 不纯，从而让我们的应用程序变得不可预测。
// 错误的示范 function reducer(state, action) { setTimeout(() => { // 这里执行异步操作 return { ...state, name: action.payload } }, 1000) }
-- -------------------- ---- ------- -- ----- -------- -------------- ------- - ------ ------------- - ---- -------------- ------ - --------- ----- -------------- - -------- ------ ----- - -展开代码
如果我们需要在 Redux 中执行异步操作，可以使用 Redux 中间件来处理。比如，redux-thunk 中间件可以让我们在 action 中执行异步操作。
-- -------------------- ---- ------- -- -- ----------- ------ -------- ---------------- - ------ ---------- -- - ------------- -- - ---------- ----- -------------- -------- ---- -- -- ----- - -展开代码
3. 不要在 Redux reducer 中改变传入的参数
Redux reducer 应该是一个纯函数，它只接受 state 和 action 作为输入，然后返回新的 state。因此，我们不能在 reducer 中改变传入的参数，否则会导致 reducer 不纯，从而让我们的应用程序变得不可预测。
// 错误的示范 function reducer(state, action) { state.name = action.payload return state }
-- -------------------- ---- ------- -- ----- -------- -------------- ------- - ------ ------------- - ---- -------------- ------ - --------- ----- -------------- - -------- ------ ----- - -展开代码
4. 不要在 Redux action 中传递过多的参数
Redux action 应该是一个简单的 JavaScript 对象，它包含一个 type 属性和一个可选的 payload 属性。因此，我们不应该在 Redux action 中传递过多的参数，否则会让我们的应用程序变得不可预测。
// 错误的示范 store.dispatch({ type: 'CHANGE_NAME', payload: { firstName: 'Alice', lastName: 'Green' } })
// 正确的示范 store.dispatch({ type: 'CHANGE_NAME', payload: 'Alice Green' })
5. 不要在 Redux reducer 中使用 Date.now() 等不纯的函数
Redux reducer 应该是一个纯函数，它只接受 state 和 action 作为输入，然后返回新的 state。因此，我们不能在 reducer 中使用 Date.now() 等不纯的函数，否则会导致 reducer 不纯，从而让我们的应用程序变得不可预测。
// 错误的示范 function reducer(state, action) { return { ...state, timestamp: Date.now() } }
-- -------------------- ---- ------- -- ----- -------- -------------- ------- - ------ ------------- - ---- ------------------- ------ - --------- ---------- -------------- - -------- ------ ----- - -展开代码
如果我们需要在 Redux 中使用不纯的函数，可以使用 Redux 中间件来处理。比如，redux-saga 中间件可以让我们在 Redux 中使用 Generator 函数。
// 使用 redux-saga 处理不纯的函数 function* updateTimestamp() { const timestamp = yield call(Date.now) yield put({ type: 'UPDATE_TIMESTAMP', payload: timestamp }) }
6. 不要在 Redux reducer 中返回 undefined
Redux reducer 应该是一个纯函数，它只接受 state 和 action 作为输入，然后返回新的 state。因此，我们不能在 reducer 中返回 undefined，否则会导致 reducer 不纯，从而让我们的应用程序变得不可预测。
// 错误的示范 function reducer(state, action) { if (action.type === 'RESET') { return undefined } return state }
-- -------------------- ---- ------- -- ----- -------- ------------- - ------------- ------- - ------ ------------- - ---- -------- ------ ------------ -------- ------ ----- - -展开代码
7. 不要在 Redux reducer 中修改传入的 state 对象
Redux reducer 应该是一个纯函数，它只接受 state 和 action 作为输入，然后返回新的 state。因此，我们不能在 reducer 中修改传入的 state 对象，否则会导致 reducer 不纯，从而让我们的应用程序变得不可预测。
// 错误的示范 function reducer(state, action) { state.name = action.payload return state }
-- -------------------- ---- ------- -- ----- -------- -------------- ------- - ------ ------------- - ---- -------------- ------ - --------- ----- -------------- - -------- ------ ----- - -展开代码
8. 在 Redux action 中使用常量来表示 action type
Redux action 应该是一个简单的 JavaScript 对象，它包含一个 type 属性和一个可选的 payload 属性。因此，我们应该在 Redux action 中使用常量来表示 action type，这样可以让我们的代码更加可维护和易于调试。
// 错误的示范 store.dispatch({ type: 'changeName', payload: 'Alice' })
// 正确的示范 const CHANGE_NAME = 'CHANGE_NAME' store.dispatch({ type: CHANGE_NAME, payload: 'Alice' })
9. 在 Redux 中使用 combineReducers 函数来合并多个 reducer
如果我们的应用程序有多个 reducer，我们可以使用 Redux 中的 combineReducers 函数来合并它们。这样可以让我们的代码更加可维护和易于调试。
// 错误的示范 const reducer1 = (state, action) => { ... } const reducer2 = (state, action) => { ... } const store = createStore(reducer1) store.dispatch(action) store.replaceReducer(reducer2)
-- -------------------- ---- ------- -- ----- ----- -------- - ------- ------- -- - --- - ----- -------- - ------- ------- -- - --- - ----- ----------- - ----------------- --------- -------- -- ----- ----- - ------------------------ ----------------------展开代码
10. 在 Redux 中使用 createSelector 函数来缓存计算结果
如果我们需要计算一些复杂的数据，我们可以使用 Redux 中的 createSelector 函数来缓存计算结果。这样可以让我们的代码更加可维护和易于调试。
// 错误的示范 const mapStateToProps = (state) => ({ result: state.data.filter(item => item > 10) }) const MyComponent = ({ result }) => { ... }
-- -------------------- ---- ------- -- ----- ----- ---------- - ----- -- ---------- ----- ------------ - --------------- ----------- ---- -- ---------------- -- ---- - --- - ----- --------------- - ------- -- -- ------- ------------------- -- ----- ----------- - -- ------ -- -- - --- -展开代码
以上就是 Redux 开发中可能会遇到的各种坑，希望本文能够帮助读者更好地理解 Redux 开发，并能够避免一些常见的错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6788c36009307066474e5386
