DEV Community

kaede
kaede

Posted on

React Redux Tutorial Part 5 -- useSelector の使い方の復習

#redux

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

改めてみると、slice ファイルでグローバルステート定義して
export default で出して

export function Counter() { const count = useAppSelector((state) => state.counter.value)
Enter fullscreen mode Exit fullscreen mode

useSelector (をラップしたもの) でグローバルステートを持ってきている。

Top comments (0)