Frontend | Вопросы собесов

🤔Что нужно сделать, чтобы поменять данные в хранилище redux ?



Чтобы изменить данные, нужно выполнить несколько шагов: создать действие (action), определить редюсер (reducer), который будет обрабатывать это действие и обновлять состояние, и затем отправить действие (dispatch action) в хранилище. Рассмотрим эти шаги более подробно.



🚩Шаги для изменения данных в хранилище



🟠Создание действия (action)

Это объект, который описывает, что должно произойти. Он должен содержать как минимум свойство type, которое указывает на тип действия. Дополнительно можно добавить любые данные, которые нужны для обновления состояния.

// actions.js

export const increment = () => ({

  type: 'INCREMENT',

});



export const decrement = () => ({

  type: 'DECREMENT',

});



export const setValue = (value) => ({

  type: 'SET_VALUE',

  payload: value,

});

🟠Создание редюсера (reducer)

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

// reducer.js

const initialState = {

  count: 0,

};



const counterReducer = (state = initialState, action) => {

  switch (action.type) {

    case 'INCREMENT':

      return {

        ...state,

        count: state.count + 1,

      };

    case 'DECREMENT':

      return {

        ...state,

        count: state.count - 1,

      };

    case 'SET_VALUE':

      return {

        ...state,

        count: action.payload,

      };

    default:

      return state;

  }

};



export default counterReducer;

🟠Создание хранилища (store): Создается с использованием функции createStore из библиотеки Redux. Хранилище объединяет редюсеры и обеспечивает централизованное управление состоянием.

// store.js

import { createStore } from 'redux';

import counterReducer from './reducer';



const store = createStore(counterReducer);



export default store;

🟠Подключение Redux к React (или другому фреймворку): Нужно подключить его через провайдер (Provider), который делает хранилище доступным для всех компонентов в дереве компонентов.

// index.js

import React from 'react';

import ReactDOM from 'react-dom';

import { Provider } from 'react-redux';

import App from './App';

import store from './store';



ReactDOM.render(

  <Provider store={store}>

    <App />

  </Provider>,

  document.getElementById('root')

);

🟠Использование состояния и отправка действий в компонентах: Для получения состояния из хранилища и отправки действий используются хуки useSelector и useDispatch из библиотеки react-redux.

// App.js

import React from 'react';

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

import { increment, decrement, setValue } from './actions';



const App = () => {

  const count = useSelector(state => state.count);

  const dispatch = useDispatch();



  return (

    <div>

      <h1>Counter: {count}</h1>

      <button onClick={() => dispatch(increment())}>Increment</button>

      <button onClick={() => dispatch(decrement())}>Decrement</button>

      <button onClick={() => dispatch(setValue(10))}>Set to 10</button>

    </div>

  );

};



export default App;

Ставь 👍 и забирай 📚 Базу знаний