Redux Toolkit

3163 ワード
React テキストリンク

toolkitの整理


configureStore()


redux devtoolsを使用して自動的に登録します.
const store = configureStore({ reducer });

createAction()


createActionは、長い動作コードを使いやすくします.
console.logが撮れば{type:,payload:}の形式でデータが表示されます.
//action 
const ADD = "ADD";
const DELETE = "DELETE";

const addToDo = text => {
    return {
        type: ADD,
        text
    };
};

const deleteToDo = id => {
    return {
        type: DELETE,
        id: parseInt(id)
    };
};
//--------------------------------------------------------------
//1. redux toolkit createAction을 실행시키면 가 나타난다.
const addToDo = createAction("ADD");
const deleteToDo = createAction("DELETE");

createReducer()

  • 突然変異可能(immer.js内部機能)
  • はまた、新しいオブジェクト
    • を返すことができる.
    //reducer 
const reducer = (state = [], action) => {
    switch(action.type){
        // case ADD:
        case addToDo.type:
            // return [{text: action.text, id: Date.now()}, ...state];
            return [{text: action.payload, id: Date.now()}, ...state];
        // case DELETE:
        case deleteToDo.type:
            // return state.filter(toDo => toDo.id !== action.id)
            return state.filter(toDo => toDo.id !== action.payload)
        default:
            return state;
    }
}
//--------------------------------------------------------------

//2. redux toolkit createReducer을 실행시키면 {type : , payload: }가 나타난다.

const reducer = createReducer([], {
    [addToDo] : (state, action) => {
        //mutate 가능!!!**
        state.push({text: action.payload, id: Date.now()});
    },
    [deleteToDo]: (state, action) => state.filter(toDo => toDo.id !== action.payload)
        
})

    createSlice()


    createAction+createReducerの機能があり、両方を同時に作成できます.
    const toDos = createSlice({
    name: "toDoReducer",
    initialState: [],
    reducers: {
        add: (state, action) => {
            state.push({text: action.payload, id: Date.now()});
        },
        remove: (state,action) => state.filter(toDo => toDo.id !== action.payload)
    }
}) 

//toDos.reducer => reducer
const store = configureStore({ reducer: toDos.reducer });

//toDos.action => action
export const {add, remove} = toDos.actions;

export default store;

    createSelector()


    createSelector関数は、以前に計算した値をメモリに保存し、値が変更された場合にのみ計算します.
    const shopItemsSelector = state => state.shop.items

const subtotalSelector = createSelector(
  shopItemsSelector,
  items => items.reduce((subtotal, item) => subtotal + item.value, 0)
)

    createAsyncThunk()


    react-redux


    useDispatch()


    reduxのdispatchを使用できます
    const dispatch = useDispatch();

    useSelector()

    const todos = useSelector(state => state.todos);
    userSelectorを使用してリカバリポイントのステータスをクエリーする場合、ステータスが変更されていない場合は再レンダリングされません.
    ベリーパイ4 b入門
    TIL-JAVA Spring DAY 16(JPA実施完了)