[Redux][basic]Reduxについて

8510 ワード

redux テキストリンク

冗長性でデータを処理する方法

store

import { createStore } from 'redux';
import reducer from '메인리듀서';

const configureStore = () => {
  const store = createStore(reducer);
  store.dispatch({
    type: 'CHANGE_NAME',
    data: 'zeromountain'
  }); // type과 data가 리듀서로 전달되어 다음 state가 생성
  return store
}

一つstore・stateとreducerからなる

1️⃣ state(define)

const initialState = {
  name: 'yeongsan',
  age: 31,
  hobby: 'soccer'
}

店舗に格納されているデータ상태

2️⃣ reducer(update)

디스패치渡される액션対象がショップ内に反映されるstate

履歴管理は変更なし

{
  ...state, // 유지해도 되는 데이터는 참조 관계로 둔다. 
    name: action.data // 값을 변경해야 할 데이터
}

浅いコピー=>新しいオブジェクトを作成するか、同じオブジェクトを参照してメモリを節約する(配置モードで履歴を削除する)

const nest = {b: 'c'};
const prev = {a: nest};
const next = {...prev}

prev.a === next.a // true
prev === next // false

(이전상태, 액션) => 다음상태

  const rootReducer = (state = initialState, action) => {
    switch(action.type) {
      case 'CHANGE_NAME':
        return {
          ...state,
          name: action.data,
        }
      default: {
        return state;
      }
    }
  }

action

動的動作・動作ジェネレータ

const changeName = (data) => {
  return {
    type: 'CHANGE_NAME',
    data,
  }
}

dispatch

action乙storeキャストを渡す

store.dispatch(changeName('zeromountain'));

反応器の状態を使う

ユーザ名を素子に渡す必要がないprops状態が変わると自動的に再表示される

import {useSelector} from 'react-redux'

const 리액트_컴포넌트 = () => {
  const userName = useSelector((state) => state.name)
  (...)
}

Reference

この問題について([Redux][basic]Reduxについて), 我々は、より多くの情報をここで見つけました https://velog.io/@zero_mountain/Reduxbasic-리덕스를-알아보자

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

React hook

TIL 5. 関数(Function)-宣言と呼び出し