В нашем проекте «Реакция js», когда мы используем редукс и когда мы используем реактив

Question

Я просто спрашиваю, есть ли в нашем проекте огромное количество кода js, только для той цели, для которой мы используем response-redux.

Answer 1

Зачем использовать 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 2

В качестве альтернативы вы можете использовать встроенные функции React, такие как ContextAPI и ReactHoocks, для создания собственной глобальной системы управления состоянием.

1. Создайте своего провайдера

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>
    );
  }
}

Для лучшего понимания см. Управление состоянием с помощью React Hooks и Context API в 10 строках кода!

Answer 3

Согласно документам,

В общем, используйте Redux, когда у вас есть разумные объемы данных, изменяющиеся со временем, вам нужен единый источник правды, и вы обнаружите, что это похоже на сохранение всего в состояние компонента React верхнего уровня больше не является достаточным.

Таким образом, когда у вас есть разные компоненты, которым нужно совместно использовать состояние, вы можете go для redux. Если ваше веб-приложение содержит независимые компоненты, которые просто обращаются к любому API и отображают данные, которые не будут использоваться никаким другим компонентом, тогда нет необходимости в избыточности.