Redux ??: React?? ?? ?? ???

Redux Toolkit? ???????? Redux? ???? ????? ????? ????? ??? ?? ????????. Redux? ?? ????? ?? ??, ?? ?? ? ???? ???? ?? ?? ??? ??? ??? ? ????. Redux ??(RTK)? ???? ??? ????? ???? ?? ??? ???? Redux ??? ?? ?? ????? ?? ? ??? ???????.

Redux Toolkit? ???? ?? ???? ???? ???? ???? ????, ???? ????, ??? ??? ? ????. ?? ???? ?? ???? ??? ??? ??? ???? ? ??? ?? ? ?? ?? ??? ???? ????.

---

1. Redux ???? ??????

Redux Toolkit? Redux ??? ?? ????? ???? ??? ???? ???? ???? ?? ???? ?? ????????. ?? ?? ????? ???? ???? ?? ???? ???? ????? ? Redux ??? ???? ??? ????? ???? ???? ??? ???? ??? ? ??? ???.

---

2. Redux ??? ?? ??

Redux Toolkit? Redux ??? ????? ?? ?? ?? ??? ????? ?????.

1. ?????

configureStore? ??? ??? ?? redux-thunk? ?? ?? ????? ???? ???? ???? ?? Redux DevTools? ???? ??? ??? ??????.

?:

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

• configureStore? ??? ??? ????? createStore ??? ?? ? ?? ??????.

2. ???? ???

createSlice? Redux ??? ??? ???? ???? ??? ?? ???? Redux ???? ??? ????? ???????.

?:

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1; // Direct mutation allowed due to immer.js under the hood
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    }
  }
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

• createSlice? ??? ??? ??? ???? ?? ??? ? ?? ??? ???? ?????.

3. createAsyncThunk

createAsyncThunk? API?? ???? ???? ?? Redux ??? ???? ?? ??? ??? ???? ?? ?????. ??? ??? ???? ?? ??? ?? ???(?? ?, ?? ? ?? ??)? ?????.

?:

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

• createAsyncThunk? Redux?? ???? ???? ?? ???? ??? ??? ???? ? ??? ???.

4. createEntityAdapter

createEntityAdapter? Redux?? ???? ???? ???? ???????. ?? ??? ?? ??? ??? ????? ???? ? ??? ???.

?:

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1; // Direct mutation allowed due to immer.js under the hood
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    }
  }
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

• createEntityAdapter? ??? ???(?: ?? ?? ??) ??? ????? ??? ??, ???? ?? ??? ?? ??? ??? ? ?? ????.

---

3. Redux Toolkit? ??

1. ??? ??

RTK? Redux? ???? ? ??? ??? ??? ?? ?? ????. ?? ??, ?? ???, ???? ???? ???? ?? ?? createSlice? ???? ?? ?? ???? ??? ? ????.

2. ?? ????(Immer.js? ??)

RTK? ????? Immer.js? ???? ???? "??" ??? ??? ? ????. ??? Immer? ??? ???? ???? ???? ?? ??? ???? ??? ???? ????? ?????.

3. ? ?? ??? ??

redux-thunk? ?? ????? ???? ???? Redux DevTools? ?????? Redux Toolkit? ???? Redux ??? ? ?? ????? ????? ? ????. RTK? ?? ???? ?? ????? TypeScript? ?? ??? ?? ??? ?? ????.

4. ???? ??? ??

createAsyncThunk ??? ??? ??? ??? ???? ?? Redux ??? ???? ???? ??? ?? ??? ???? ?????.

5. createEntityAdapter? ???? ??? ???

RTK? ???? ??? ??? ?? createEntityAdapter? ?? ????? ?????. ?? Redux?? ??? ??? ??(?: ??? ??, ?? ?)? ???? ? ?? ?????.

---

4. React ??? Redux ?? ??

??? React ??? Redux Toolkit? ???? ?? ?? ??????.

1??: Redux Toolkit ? React-Redux ??

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

export const fetchData = createAsyncThunk(
  'data/fetchData', 
  async (url) => {
    const response = await fetch(url);
    return response.json();
  }
);

const dataSlice = createSlice({
  name: 'data',
  initialState: { items: [], status: 'idle' },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchData.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchData.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.items = action.payload;
      })
      .addCase(fetchData.rejected, (state) => {
        state.status = 'failed';
      });
  }
});

export default dataSlice.reducer;

2??: ???? ? ??? ??

createSlice? ???? ?? ??? ?? ??? ???? ?? ???? Redux ????? ?????.

import { createEntityAdapter, createSlice } from '@reduxjs/toolkit';

const usersAdapter = createEntityAdapter();

const usersSlice = createSlice({
  name: 'users',
  initialState: usersAdapter.getInitialState(),
  reducers: {
    addUser: usersAdapter.addOne,
    removeUser: usersAdapter.removeOne,
  }
});

export const { addUser, removeUser } = usersSlice.actions;
export default usersSlice.reducer;

3??: ??? ??

????,configureStore? ???? Redux ???? ?????.

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

4??: React ?? ???? Redux ??

react-redux? Provider ?? ??? ?? ???? ?????? ???? Redux ???? ??? ? ?? ????.

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1; // Direct mutation allowed due to immer.js under the hood
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    }
  }
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

• useSelector: Redux ??? ??????.
• useDispatch: ??? ???? ??? ???????.

---

5. ??

Redux Toolkit? ??? ??? ???? createSlice, createAsyncThunk ?configureStore? ?? ???? ??? ???? Redux ?? ????? ??????. RTK? ???? ???? Redux ??? ???? ?? ???? ?? ??????? ?? ??? ??? ? ????.

RTK? ???? ?? ????? ?? ??? ?? ???? ?? ? ??? ??? ?? ??? ? ???? ??? React ??????? ??? ?????.

---

? ??? Redux ?? ?????: React ??? ?? ?? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!