내 react redux를 관리하는 방법

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

리덕스/store.js

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

export default createStore(rootReducer);

리덕스/시스템/actions.js

import {
  SET_SYSTEM_DATA
} from "./actionTypes";


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

리덕스/시스템/actionTypes.js

export const SET_SYSTEM_DATA = "SET_SYSTEM_DATA"

패키지.json

{
  "name": "redux_actions"
}

리덕스/리듀서/index.js

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

export default combineReducers({ system })

리덕스/리듀서/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)

당신이 무슨 생각을하는지 제게 알려주세요. 고맙습니다!