[React] Cùng tìm hiểu về Redux Toolkit, một phiên bản mới của Redux

1. Redux Toolkit (RTK) là gì và tại sao lại có nó?

npm install @reduxjs/toolkit

• RTK là một thư viện giúp mình viết Redux tốt hơn, dễ hơn và đơn giản hơn. (tiêu chuẩn để viết Redux)
• Ba vấn đề làm nền tảng ra đời RTK:

- Configuring a Redux store is too complicated.
- I have to add a lot of packages to get Redux to do anything useful.
- Redux requires too much boilerplate code.

2. RTK bao gồm những gì?

configureStore()

• Có sẵn Redux DevTools
• Có sẵn redux-thunk để thực hiện async actions

// Khi chưa có Redux Toolkit
// store.js
import { createStore, applyMiddleware, compose } from 'redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from './reducers';
// Enable to use redux dev tool in development mode
const composeEnhancers = 'development' === process.env.NODE_ENV ? (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose) : compose;
// Use redux-thunk as a redux middleware
const enhancer = composeEnhancers(applyMiddleware(thunkMiddleware));
const store = createStore(rootReducer, {}, enhancer);
export default store;

// Khi đã có redux toolkit 🤣
// store.js
import { configureStore } from '@reduxjs/toolkit'
import rootReducer from './reducers'
const store = configureStore({ reducer: rootReducer })

createReducer()

// Không có Redux Toolkit
function counterReducer(state = 0, action) { switch (action.type) { case 'increment': return state + action.payload case 'decrement': return state - action.payload default: return state }
}

// Có Redux Toolkit
// - Mỗi key là một case
// - Không cần handle default case
const counterReducer = createReducer(0, { increment: (state, action) => state + action.payload, decrement: (state, action) => state - action.payload
})

// Một điểm hay nữa là reducer có thể mutate data trực tiếp.
// Bản chất bên dưới họ sử dụng thư viện Immerjs
const todoReducer = createReducer([], { addTodo: (state, action) => { // 1. Có thể mutate data trực tiếp 🎉 state.push(action.payload) }, removeTodo: (state, action) => { // 2. Hoặc phải trả về state mới // CHỨ KO ĐƯỢC cả 1 và 2 nha 😎 const newState = [...state]; newState.splice(action.payload, 1); return newState; }
})

createAction()

// Không có redux toolkit
const INCREMENT = 'counter/increment'
function increment(amount) { return { type: INCREMENT, payload: amount }
}
const action = increment(3)
// { type: 'counter/increment', payload: 3 }

// Có redux toolkit
const increment = createAction('counter/increment')
const action = increment(3)
// returns { type: 'counter/increment', payload: 3 }
console.log(increment.toString())
// 'counter/increment'

Các bạn đọc thêm những hàm sau nữa nhé 😉

• createSlice(): https://redux-toolkit.js.org/api/createSlice
• createSelector(): https://redux-toolkit.js.org/api/createSelector
• createAsyncThunk(): https://redux-toolkit.js.org/api/createAsyncThunk
• createEntityAdapter(): https://redux-toolkit.js.org/api/createEntityAdapter

3. Setup một ví dụ đơn giản sử dụng RTK

// 1. Setup todo slice
// todoSlice.js
const todoSlice = createSlice({ name: 'todos', initialState: [], reducers: { addPost(state, action) { state.push(action.payload); }, removePost(state, action) { state.splice(action.payload, 1) } }
});
const { actions, reducer } = todoSlice;
export const { addPost, removePost } = actions;
export default reducer;

// 2. Setup redux store
// store.js
import { configureStore } from '@reduxjs/toolkit';
import todoSlice from 'features/todos/todoSlice';
const store = configureStore({ reducer: { todos: todoSlice },
})

// 3. Bind Redux Provider to App
// src/index.js
import { Provider } from 'react-redux';
import store from './store';
import App from './App';
function Main() { return ( <Provider store={store}> <App /> </Provider> )
}

// 4. Using redux in component
// todo.jsx
import { useDispatch, useSelector } from 'react-redux';
import { removeTodo } from 'features/todos/todoSlice';
function Todo() { const dispatch = useDispatch(); const todoList = useSelector(state => state.todos); const handleTodoClick = (todo, idx) => { const action = removeTodo(idx); dispatch(action); } return ( <ul> {todoList.map((todo, idx) => ( <li key={todo.id} onClick={() => handleTodoClick(todo, idx)}> {todo.title} </li> ))} </ul> )
}