React js reducer逻辑条件_js条件筛选逻辑_如何在Reducer React Typescript中设置条件有效负载 - 腾讯云开发者社区

React js reducer逻辑条件

基础概念

React.js 中的 reducer 是一个纯函数，用于处理状态的变化。它接收当前的状态和一个动作（action），并返回一个新的状态。reducer 通常与 Redux 或 React 的 useReducer 钩子一起使用，以实现全局状态管理。

类型

在 Redux 中，reducer 通常是对象的一个属性，每个属性对应一个特定的动作类型。在 React 的 useReducer 中，reducer 是一个函数，接收当前状态和动作作为参数。

应用场景

当应用的状态变得复杂，需要多个组件共享状态时，使用 reducer 是一个很好的选择。例如，在大型单页应用（SPA）中，管理全局状态（如用户认证、购物车内容等）通常需要使用 reducer。

示例代码

以下是一个简单的 Redux reducer 示例：

// 定义初始状态
const initialState = {
  count: 0
};

// 定义 reducer 函数
function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

// 使用 reducer
const store = createStore(counterReducer);

在 React 中使用 useReducer 的示例：

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  );
}

遇到的问题及解决方法

问题：为什么 `reducer` 中的状态更新没有反映到 UI 上？

原因：可能是由于直接修改了状态对象，而不是返回一个新的状态对象。

解决方法：确保 reducer 始终返回一个新的状态对象，而不是修改现有的状态对象。可以使用对象展开运算符（...）来创建新的状态对象。

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 }; // 返回新的状态对象
    case 'DECREMENT':
      return { ...state, count: state.count - 1 }; // 返回新的状态对象
    default:
      return state;
  }
}