Stand Alone 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);
Reference
이 문제에 관하여(Stand Alone Redux, 흐름을 이해하기 위한 초보자용 코드 레퍼런스...), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/govindbisen/redux-beginners-code-reference-4d0o텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)