リアクションの作成-ユーザーモジュールの概念編

リデスはデス構造からなる。(場合によってはそうでない)

ワイヤ構造(Wire Structure):アクションタイプ、アクション関数、リスナー、初期状態(デフォルト)が寒波日に含まれる構造

配線構造を持つモジュールを作成するには、複数のパッケージを敷設する必要があります。

2021.03標準
immerの使用
yarn add immer redux-actions
Ridexでhistoryのパッケージを使用できるようにします
yarn add redux react-redux redux-thunk redux-logger [email protected] [email protected]
redusファイル、フォルダの作成(ツリー構造で説明されています!)

SRC >
    > redux(폴더생성) 
        > modules(폴더생성)
    	    >user.js (파일생성)
    > configureStore.js(파일생성)

実際に生成されたファイル

ワイヤ構造ソースの構成

[user.js]

import {createAction, handleActions} from "redux-actions"; // createAction: 액션을 편하게 만들어줌 / handleActions: 리듀서를 편하게 만들어줌
import {produce} from "immer"; // 불변성 관리 편하게 해줌 (불변성 : 어떤값을 직접적으로 변경하지 않고 새로운 값으로 복사하는 것)

//actions (액션타입)
const LOG_IN = "LOG_IN";
const LOG_OUT = "LOG_OUT";
const GET_USER = "GET_USER";

// action creators
const logIn = createAction(LOG_IN, (user)       =>      ({user})); 
                          //타입   파라미터값을 (리듀서에게) 넘겨줌


// reducer
const reducer = handleActions({

[LOG_IN]: (state, action) => {
// 여기에다가 어떤 액션에 대한 내용인지 바로 씀. 액션이 바뀔경우도 쭉쭉 쓰면됨.
}
},      {});
// initialState 써주는 부분

コメント虫のコンセプトで説明していますのでコメントをご覧ください
概念を理解した以上、ソースコードの作成を始めます.

import {createAction, handleActions} from "redux-actions";
import {produce} from "immer";
import {setCookie, getCookie, deleteCookie} from "../../shared/Cookie"

//actions (액션타입)
const LOG_IN = "LOG_IN";
const LOG_OUT = "LOG_OUT";
const GET_USER = "GET_USER";

// action creators
const logIn = createAction(LOG_IN, (user) => ({user})); 
const logOut = createAction(LOG_OUT, (user) => ({user}));
const getUser = createAction(GET_USER, (user) => ({user}));


// initialState
const initialState = {
    user: null,
    is_login: false,

}

// reducer
export default handleActions({

    [LOG_IN]: (state, action) => produce(state, (draft) => {
        setCookie("is_login", "success");
        draft.user = action.payload.user;
        draft.is_login = true;
    }),
    [LOG_OUT]: (state, action) => produce(state, (draft) => {}),
    [GET_USER]: (state, action) => produce(state, (draft) => {}),
    
    },
    initialState
);

// action creator export
const actionCreators = {
    logIn,
    logOut,
    getUser
};

これから何をしますか?彼に店を開かなければならない。