Как я управляю своим react redux

Автор Николай Праскурин На чтение 2 мин. Просмотров 22 Опубликовано 28.09.2022

Иногда при создании нескольких действий, типов действий, редукторов и т.д. в react-redux задается глобальное значение.

Вот как я управляю своими редукторами

используемые пакеты:

redux
react-redux

Сначала вот структура моих папок

Структура папок

 redux
  actions
   system
    actions.js
    actionTypes.js
   index.js (you can ignore this one)
   package.json (you can ignore this one)
  index.js (you can ignore this one)
  reducers
   index.js
   system.js
  index.js (you can ignore this one)
  store.js

Вход в полноэкранный режим Выход из полноэкранного режима

redux/store.js

import { createStore } from "redux";
import rootReducer from "./reducers";

export default createStore(rootReducer);

Войти в полноэкранный режим Выйти из полноэкранного режима

redux/system/actions.js

import {
  SET_SYSTEM_DATA
} from "./actionTypes";


export const setSystemData = content => ({
  type: SET_SYSTEM_DATA,
  payload: {
      content
  }
})

Войти в полноэкранный режим Выход из полноэкранного режима

redux/system/actionTypes.js

export const SET_SYSTEM_DATA = "SET_SYSTEM_DATA"

Войти в полноэкранный режим Выход из полноэкранного режима

package.json

{
  "name": "redux_actions"
}

Войти в полноэкранный режим Выход из полноэкранного режима

redux/reducers/index.js

import { combineReducers } from "redux"
import system from "./system"

export default combineReducers({ system })

Войти в полноэкранный режим Выйти из полноэкранного режима

redux/reducers/system.js

import {
  SET_SYSTEM_DATA,
} from "../actions/system/actionTypes"

const initialState = {
  is_global_value: false,

};

export default function(state = initialState, action) {
  switch (action.type) {
    case SET_SYSTEM_DATA: {
      const { content } = action.payload
      return {
        ...state,
        [content.key]: content.value
      };
    }
    default:
      return state
  }
}

Войти в полноэкранный режим Выход из полноэкранного режима

Теперь установка завершена.

Вот как я его использую.

//first the imports ofcourse
import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import {setSystemData} from 'redux_actions/system/actions'

const dispatch = useDispatch()

Войти в полноэкранный режим Выход из полноэкранного режима

Если я хочу изменить значение редуктора is_global_value, я могу сделать это следующим образом

dispatch(setSystemData({
 key: 'is_global_value',
 value: true  
}))

Войти в полноэкранный режим Выйти из полноэкранного режима

Попробуйте прослушать значение вашего редуктора с помощью useSelector

import { useSelector } from 'react-redux'

const is_global_value = useSelector(state => state.system.is_global_value)

console.log(is_global_value)

Войти в полноэкранный режим Выйти из полноэкранного режима

Дайте мне знать, что вы думаете. Спасибо!

Добавить комментарий