Question

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

Answer 1

根据文档

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

因此，当您需要共享状态的不同组件时，可以使用redux。如果您的Web应用程序包含仅使用任何API并显示不会被任何其他组件使用的数据的独立组件，则无需进行Redux。

Answer 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/

Answer 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!

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

3 个答案: