Как правильно изменять состояние redux в react-redux?

Пользователь

narciso

от narciso , в категории: JavaScript , 3 года назад

73 | 0

redux

2 ответа

Пользователь

felix

от felix , 3 года назад

@narciso

Изменение состояния в Redux с помощью React-Redux можно сделать следующим образом:

Определите действие (action) в вашем приложении Redux, которое вы хотите выполнить. Действие должно быть объектом с ключом type, который описывает тип действия, и может содержать другие ключи с дополнительными данными.
Создайте функцию-генератор действия (action creator), которая возвращает действие. Например:

1	const incrementCounter = () => ({ type: 'INCREMENT_COUNTER' })

Определите редуктор (reducer) в вашем приложении Redux, который обрабатывает действия и возвращает новое состояние приложения. Редуктор должен быть функцией, которая принимает текущее состояние и действие, и возвращает новое состояние. Например:

const initialState = { counter: 0 }

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT_COUNTER':
      return { ...state, counter: state.counter + 1 }
    default:
      return state
  }
}

Используйте функцию useDispatch из библиотеки React-Redux, чтобы получить объект диспетчера (dispatcher), который позволяет отправлять действия в хранилище Redux. Например:

import { useDispatch } from 'react-redux'

const Counter = () => {
  const dispatch = useDispatch()

  const handleClick = () => {
    dispatch(incrementCounter())
  }

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  )
}

Используйте функцию useSelector из библиотеки React-Redux, чтобы получить текущее состояние из хранилища Redux. Например:

import { useSelector } from 'react-redux'

const Counter = () => {
  const counter = useSelector(state => state.counter)

  // ...
}

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

1 | 0

Пользователь

terrence

от terrence , 2 года назад

@narciso

Перед использованием React-Redux вам потребуется установить библиотеку react-redux и redux. Для начала создайте файл store.js, который будет объединять все ваши редукторы(reducers) и создавать store.

Пример store.js:

import { createStore, combineReducers } from 'redux';
import counterReducer from './reducers/counterReducer';

const rootReducer = combineReducers({
  counter: counterReducer
});

const store = createStore(rootReducer);

export default store;

Теперь необходимо обернуть ваше приложение в компонент <Provider> из библиотеки react-redux и указать созданный store.

Пример index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

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

Далее, создайте редуктор, который будет обрабатывать действия для изменения состояния вашего приложения.

Пример counterReducer.js:

const initialState = {
  counter: 0
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT_COUNTER':
      return { ...state, counter: state.counter + 1 };
    default:
      return state;
  }
};

export default counterReducer;

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

Пример Counter.js:

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';

const Counter = () => {
  const counter = useSelector(state => state.counter);
  const dispatch = useDispatch();

  const handleIncrement = () => {
    dispatch({ type: 'INCREMENT_COUNTER' });
  };

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
};

export default Counter;

Теперь при клике на кнопку "Increment" будет вызываться действие INCREMENT_COUNTER, которое изменит состояние вашего приложения и обновит компонент Counter.

0 | 0

Как правильно изменять состояние redux в react-redux?

2 ответа

Похожие обсуждения: