Компонент класса с Redux

Question

Я новичок в React и Redux, и, как мы знаем, лучше всего использовать компонент класса для тех компонентов, которые имеют состояние, и я хотел бы задать вопрос: рекомендуется ли использовать функциональный компонент для компонентов, которые имеют соединение? и взаимодействие с хранилищем Redux, поскольку те компоненты, которые взаимодействуют с хранилищем, не имеют локального состояния.

Answer 1

Начиная с версии 7.x реактив-редукс теперь имеет хуки для функциональных компонентов

const store = useSelector(store => store)

, чтобы мы могли использовать функциональный компонент с хранилищем редуксов, например, компонент класса.

, проверьте нижессылка, чтобы получить больше информации о хуках

https://react -redux.js.org / next / api / hooks

Answer 2

Рекомендуется ли использовать функциональные компоненты для компонентов, которые подключены и взаимодействуют с хранилищем Redux, поскольку те компоненты, которые взаимодействуют с хранилищем, не имеют локального состояния.

Да, эторекомендуется использовать функциональные компоненты с redux, и существует способ иметь локальное состояние в функциональном компоненте.

---

Почему рекомендуется использовать функциональные компоненты?

Реагирующая экосистема движется к использованию крючков , что означает стандартизацию функциональных компонентов .

Как указано в документах об использованииловушки или классы:

В более долгосрочной перспективе мы ожидаем, что крючки будут основным способом, которым люди пишут компоненты React.

---

Как создать локальное состояние вфункциональные компоненты с Redux?

Представлен Redux API-интерфейс Reduce-hooks , который дает функциональным компонентам возможность использовать состояние локального компонента и позволяетподписаться на магазин Redux без упаковки компонентов с помощью connect().

• useSelector
• useDispatch
• useStore

// Creating a store
const store = createStore(rootReducer)

ReactDOM.render(
  <Provider store={store}>
    <CounterComponent />
  </Provider>,
  document.getElementById('root')
)

// CounterComponent.jsx Selector example
import React from 'react'
import { useSelector } from 'react-redux'

export const CounterComponent = () => {
  // Using the store localy with a selector.
  const counter = useSelector(state => state.counter)
  return <div>{counter}</div>
}

// CounterComponent.jsx Dispatch Example
import React from 'react'
import { useDispatch } from 'react-redux'

export const CounterComponent = ({ value }) => {
  // Dispatching an action
  const dispatch = useDispatch()

  return (
    <div>
      <span>{value}</span>
      <button onClick={() => dispatch({ type: 'increment-counter' })}>
        Increment counter
      </button>
    </div>
  )
}

// CounterComponent.jsx Referencing the store example
import React from 'react'
import { useStore } from 'react-redux'

export const CounterComponent = ({ value }) => {
  const store = useStore()

  // EXAMPLE ONLY! Do not do this in a real app.
  // The component will not automatically update if the store state changes
  return <div>{store.getState()}</div>
}

Answer 3

Прекрасно подключить функциональные компоненты к магазину редуксов.

Функциональные компоненты не имеют состояния не совсем корректно с крючками. Вы можете добавить состояние к функциональному компоненту с помощью хуков.

Отвечая на ваш вопрос, вы можете подключить функциональный компонент с избыточным хранилищем, как показано ниже.

import React from "react";
import ReactDOM from "react-dom";
import { createStore } from "redux";
import { Provider, connect } from "react-redux";

const reducers = (state = 0, action) => {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;
    default:
      return state;
  }
};

const store = createStore(reducers, 0);

const App = ({ count, handleIncrement, handleDecrement }) => {
  return (
    <div>
      <button onClick={handleIncrement}>+</button>
      <h4>{count}</h4>
      <button onClick={handleDecrement}>-</button>
    </div>
  );
};

const mapStateToProps = state => {
  return { count: state };
};

const mapDispatchToProps = dispatch => {
  return {
    handleIncrement: () => {
      dispatch({ type: "INCREMENT" });
    },
    handleDecrement: () => {
      dispatch({ type: "DECREMENT" });
    }
  };
};

const ConnectedApp = connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

ReactDOM.render(
  <Provider store={store}>
    <ConnectedApp />
  </Provider>,
  document.getElementById("root")
);