React Redux

Redux概念
Redux Toolkit

Reduxの状態管理

状態を監視することによって操作を変えることができる

Reduxを用いて、とある1か所で状態管理しておけば、楽になれる

Core Concepts

1. Single source of truth

2. State is read-only

3. Changes are made with pure functions

Data Flow

• Store: state を保存しておく要素、内部に Reducer を保持する
• Reducer: Action を受け取り、既存の state と Action を利用して新たな state を作成する
• Dispatch: View などから Action を受け取り、Store（正しくは内部の Reducer）へ送信する
• Action: 変更内容を内部に含む要素であり、Dispatch によって送信される。（基本的にオブジェクト形式）

In a React + Redux app, your global state should go in the Redux store, and your local state should stay in React components.

Redux Toolkit

Next.js Template

Redux Essentials, Part 2: Redux Toolkit App Structure

Slice概念

Redux Slices: A “slice” is a collection of Redux reducer logic and actions for a single feature in your app, typically defined together in a single file. The name comes from splitting up the root Redux state object into multiple “slices” of state.

Redux Toolkit App Structure

• Create store: configureStore()
• Provide store to components: <Provider>
• Slice: createSlice(), generate “name, initialState, reducers, action” in one function
• Thunk: redux-thunk, async logic