Redux Counter1

📁 redux / moduls / counter.js

// 초기 상태(state)
const initialState = {
  number: 0
}
//const [number, setNumber] = useState(0)

// 리듀서 : 함수
// input : state와 action
const counter = (state=initialState, action) => {
  switch (action.type) {
    default:
      return state
  }
}

export default counter

• action의 타입에 따라 작업을 수행 할 것이다.
• 리듀서 : 'state에 변화를 일으키는' 함수
  • (1) state 를 action의 type에 따라 변경하는 함수

📁 redux / moduls / users.js

// 초기 상태(state)
const initialState = {
  userId: 123
}

// input : state와 action
const users = (state=initialState, action) => {
  switch (action.type) {
    default:
      return state
  }
}

export default users

📁 redux / config / configStore.js

// 중앙 데이터 관리소(store)를 설정하는 부분
import { combineReducers, createStore } from "redux";
import counter from "../moduls/counter";
import users from "../moduls/users";

const rootReducer = combineReducers({
  counter, users
})
const store = createStore(rootReducer)

export default store

• counter 임포트

📁 App.jsx

import React from 'react'
import { useSelector } from 'react-redux'

function App() {

  // 여기에서 store에 접근하여, counter의 값을 읽어오고 싶다
  // useSelector
  // 매개변수의 state는 중앙저장소 안에 있는 state 전체를 말한다.
  const data = useSelector((state) => {
    return state;
  })

  console.log(data)
  return (
    <div>App</div>
  )
}

export default App

• 만약 counter만 가지고 오고 싶다면 App.jsx에서

const data = useSelector((state) => {
  return state;
})

const counter = useSelector((state) => {
  return state.counter;
})

console.log(counter.number)

• state -> state.counter 이렇게 바꾸면 됨.