Reduxフローの理解

16694 ワード
redux テキストリンク
Reduxの流れを理解します.
簡単なアプリケーションを作成し、ボタンをクリックすると数字を増やしたり減らしたりすることができます.👻

srcフォルダ構造

src
 -actions
 	-action.js
 -reducers 
 	-counter.js
    	-isLogged.js
    	-index.js
 -App.js
 -index.js

index.js

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
import { createStore } from "redux" //createStore import
import { Provider } from "react-redux" //Provider import
import allReducers from "./reducers/index" //컴바인된 reducer import 

//sotre 생성 
const store = createStore(
  allReducers, // 컴바인된 reducer
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() //redux devTool사용을 위해 import 해줌. 
)

//Provider에 props로 store를 보내주고 최상위 컴포넌트 감싸기
ReactDOM.render(
  <Provider store={store}> 
    <App />
  </Provider>,
  document.getElementById("root")

reducers > counter.js

//reducer는 인자로 state와 action 2개를 받는다 
//초기 state값은 0
const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case "INCREMENT":
      return state + action.payload
    case "DECREMENT":
      return state - 1
    default:
      return state
  }
}

export default counterReducer

reducers > isLogged.js

combineReducersの使用状況を記録するために、isLoggedというreducerが生成された.
const isLoggedReducer = (state = false, action) => {
  switch (action.type) {
    case "SIGN_IN":
      return !state
    default:
      return state
  }
}

export default isLoggedReducer

reducers > index.js

reducerが複数ある場合は、以下に示すように、combineReducersを使用して結合することができる.counterReducerとisLoggedReducerを組み合わせてallReducerとし、index.jsで生成されたstoreに入れればよい.
import { combineReducers } from "redux"
import counterReducer from "./counter"
import isLoggedReducer from "./isLogged"

const allReducers = combineReducers({
  counter: counterReducer,
  isLogged: isLoggedReducer,
})

export default allReducers

action.js


Actionは、オブジェクトを返す関数を作成します.
export const increment = (num) => {
  return { type: "INCREMENT", payload: num }
}

export const decrement = () => {
  return { type: "DECREMENT" }
}

App.js


最上位コンポーネント、useSelectorはhookがreducx状態値をクエリーできる関数です.
何のボタンも押さなければcounter.jsの初期状態値は0であるため、<h1>count : {counter}</h1>〜{counter}に表示される値は0である.useDispatchは接続動作の関数であり、onClickイベントが発生したときにaction.jsによって記述されたincrement()とdecrement()とが接続される.
このとき、+ボタンをクリックすると、increment()は10というパラメータを受け入れ、アクション関数はpayloadと名前を付けます.
import React from "react"
import { useSelector, useDispatch } from "react-redux"
import { increment, decrement } from "./actions/action"

function App() {
  const counter = useSelector((state) => state.counter)
  const isLogged = useSelector((state) => state.isLogged)
  const dispatch = useDispatch()

  return (
    <div className="App">
      <h1>count : {counter}</h1>
      <button onClick={() => dispatch(increment(10))}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
      {isLogged ? <h3>로그인되어야 볼수 있는 화면입니다</h3> : ""}
    </div>
  )
}

export default App

最終画面


以上のすべてのコードが完了すると、+ボタンをクリックすると、10をパラメータとしてユーザに送信するので、10個増加し、-ボタンをクリックすると、1個減少したアプリケーションが生成されます.isLoggedは、初期値stateがfalseであるため、画面に表示されない.
C#.5クラス
グラフィック(Graph)とDFS、BFS