Stand Alone Redux, 흐름을 이해하기 위한 초보자용 코드 레퍼런스...

2567 단어
Redux는 애플리케이션 전체에서 사용 가능한 상태를 유지하는 상태 관리 라이브러리입니다.

아래의 reactjs가 없는 Redux 코드를 참조하세요.
또한 이제 CreateStore는 더 이상 사용되지 않습니다.

리덕스 프로그램 1



키워드
리듀서 -> 스토어 -> 구독 -> 디스패치 -> 액션

간단한 자바 스크립트 파일처럼 실행하십시오.

npm 초기화
npm i 리덕스
노드 mycode.js

const redux = require("redux");

const counterReducer = (state = { counter: 0 }, action) => {
  if (action.type === "increment") {
    return {
      counter: state.counter + 1,
    };
  }
  if (action.type === "decrement") {
    return {
      counter: state.counter - 1,
    };
  }
  if (action.type === "multi5") {
    return {
      counter: state.counter * 5,
    };
  }
};
const store = redux.createStore(counterReducer);

const counterSubscriber = () => {
  console.log(store.getState());
};

store.subscribe(counterSubscriber);

store.dispatch({ type: "increment" });
store.dispatch({ type: "multi5" });
store.dispatch({ type: "decrement" });



redux 툴킷 프로그램 2



하다
npm 초기화
npm 설치 @reduxjs/toolkit
노드 redux-toolkit.js

import pkg from "@reduxjs/toolkit";
const { configureStore } = pkg;

const initialState = { value: 0, myName: "Govind" };

function counterReducer(state = initialState, action) {
  // Check to see if the reducer cares about this action
  if (action.type === "counter/increment") {
    // If so, make a copy of `state`
    return {
      ...state,
      // and update the copy with the new value
      value: state.value + 1,
    };
  }
  // otherwise return the existing state unchanged
  return state;
}

const store = configureStore({ reducer: counterReducer });

console.log(store.getState());

store.dispatch({ type: "counter/increment" });

console.log(store.getState());

//We can call action creators to dispatch the required  action
const increment = () => {
  return {
    type: "counter/increment",
  };
};

store.dispatch(increment());

console.log(store.getState());
// {value: 2}

//Selectors
// Selectors are functions that know how to extract specific pieces of information from a store state value.
const selectCounterValue = (state) => state.value;

const currentValue = selectCounterValue(store.getState());
console.log(currentValue); //2

const selectMyName = (state) => state.myName;
const name = selectMyName(store.getState());
console.log(name);

좋은 웹페이지 즐겨찾기