why
https://react-redux.js.org/api/hooks#useselector-examples
React Redux で connect の代替となる useSelector の説明があったが、チュートリアルとしてはなかったので、実際に動かしてみる
connect の時の流れ
https://dev.to/kaede_io/react-redux-tutorial-part-4-connect-api-woshi-tute-todo-apuriwozuo-ru-23f9
この記事の時は
redux/actions -> reducers -> redux/store -> src/index/Provider
と
redux/store -> redux/selectors.js -> Components/.../connect(mapToStateProps)
これで取ってきている
useSelector での流れ
reducers -> redux/store -> Components/.../useSelector
これで取って来れると予測する。
CRA with TS して store と reducers を作成する
npx create-react-app redux-useselector --template typescript
CRA with TS で redux-useselector という名前で React アプリを作成
https://dev.to/kaede_io/react-redux-part-1-react-redux-nodao-ru-5o1
これの流れの通りに再びやってみた。
const counterSlice = createSlice({
name: 'counter',
initialState,
reducers: {
increment: (state) => {
state.value += 1
},
decrement: (state) => {
state.value -= 1
},
incrementByAmount: (state, action: PayloadAction<number>) => {
state.value += action.payload
},
},
})
export const { increment, decrement, incrementByAmount } = counterSlice.actions
// exporting increment and decrement
export default counterSlice.reducer
// exporting counter state
改めてみると、slice ファイルでグローバルステート定義して
export default で出して
export function Counter() {
const count = useAppSelector((state) => state.counter.value)
useSelector (をラップしたもの) でグローバルステートを持ってきている。
Top comments (0)