在我们的 react js 项目中，当我们使用 redux 和使用 react 时答案

【问题标题】：In our react js project when we use redux and when we use react在我们的 react js 项目中，当我们使用 redux 和使用 react 时
【发布时间】：2020-06-05 13:12:44
【问题描述】：

我只是问我们的项目中是否有大量的 js 代码可用，只是为了我们使用 react-redux 的目的。

【问题讨论】：

标签： javascript reactjs redux react-redux

【解决方案1】：

根据文档，

一般来说，当您有合理数量的数据随时间变化时使用 Redux，您需要单一的事实来源，并且您发现将所有内容保持在顶级 React 组件状态等方法已不够用。
p>

因此，当您有不同的组件需要共享状态时，您可以使用redux。如果您的 Web 应用程序包含独立的组件，这些组件只是访问任何 API 并显示不会被任何其他组件使用的数据，那么就不需要 redux。

【讨论】：

【解决方案2】：

为什么要使用 Redux？

Redux 是 JavaScript 应用程序的可预测状态容器。它可以帮助您编写行为一致、在不同环境（客户端、服务器和本机）中运行且易于测试的应用程序。

使用 Redux 的好处

1. Redux 使状态可预测。

2.可维护性3。可调试数天。

4. 易于测试。 5. 状态持久化。

6.服务器端渲染

Redux 的一个主要好处是增加了解耦“什么发生”从“事情如何变化”。但是，您应该只实施如果您确定您的项目需要状态管理工具，请使用 Redux。

为了更好地理解，请参阅https://blog.logrocket.com/why-use-redux-reasons-with-clear-examples-d21bffd5835/

【讨论】：

【解决方案3】：

作为替代方案，您可以使用 ContextAPI 和 ReactHoocks 等内置 React 功能来构建您自己的全局状态管理系统。

创建您的提供者

import React, {createContext, useContext, useReducer} from 'react';
export const StateContext = createContext();
export const StateProvider = ({reducer, initialState, children}) =>(
  <StateContext.Provider value={useReducer(reducer, initialState)}>
    {children}
  </StateContext.Provider>
);
export const useStateValue = () => useContext(StateContext);

消费者允许访问应用程序任何组件中的值

import { StateProvider } from '../state';

const App = () => {
  const initialState = {
    theme: { primary: 'green' }
  };
  
  const reducer = (state, action) => {
    switch (action.type) {
      case 'changeTheme':
        return {
          ...state,
          theme: action.newTheme
        };
        
      default:
        return state;
    }
  };
  
  return (
    <StateProvider initialState={initialState} reducer={reducer}>
        // App content ...
    </StateProvider>
  );
}

组件内部使用：

import React, { Component } from 'react';
import { StateContext } from './state';
class ThemedButton extends Component {
  static contextType = StateContext;
  render() {
    const [{ theme }, dispatch] = this.context;
    return (
      <Button
        primaryColor={theme.primary}
        onClick={() => dispatch({
          type: 'changeTheme',
          newTheme: { primary: 'blue'}
        })}
      >
        Make me blue!
      </Button>
    );
  }
}

为了更好地理解，请参阅State Management with React Hooks and Context API in 10 lines of code!

【讨论】：