Redux toolkit忘れた時🙈
7993 ワード
boiler plate
2. useSelector, useDispatch
selectCounter、setCounterについて説明します.
import React from 'react';
import { Provider } from 'react-redux';
import store from './store/store';
export default function App() {
return (
<Provider store={store}>
<Home/>
</Provider>
);
}
// store
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterReducer';
export default configureStore({
reducer: {
counter: counterReducer,
},
});
// slice
import { createSlice } from '@reduxjs/toolkit';
const initialState = {
count: 0,
};
export const counterSlice = createSlice({
name: 'counter',
initialState,
reducers: {
setCounter: (state, action) => {
state.count = action.payload;
},
},
extraReducers: {},
});
export const { setCounter } = counterSlice.actions;
export const selectCounter = (state) => state.counter.count;
export default counterSlice.reducer;
1.逆の例として例を示します.2. useSelector, useDispatch
selectCounter、setCounterについて説明します.
setCounter
はsetStateのようにsetterの役を演じます.// useDispatch
// setCounter
...
const dispatch=useDispatch(); // dependencies = react-redux
dispatch(setCounter(1)); // store에서 state를 1로 업데이트 함
selectCounter는 store의 state를 참조한다.
// useSelector
// selectCOunter
...
const count=useSelector(selectCounter); // dependencies= react-redux count는 이제 store의 counterSlice의 state를 참조한다.
console.log(count);
...
Reference
この問題について(Redux toolkit忘れた時🙈), 我々は、より多くの情報をここで見つけました https://velog.io/@zerozoo-front/Redux-toolkit-까먹었을-때テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol