- vừa được xem lúc

[React] Giới thiệu tổng quát về Redux Toolkit

0 0 6.6k

Người đăng: Le Ba Thanh Tuan

Theo Viblo Asia

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é ?

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> )
}

Bình luận

Bài viết tương tự

- vừa được xem lúc

Tìm hiểu về Redux Thunk

Chào mọi người, nếu bạn là người đã biết về React và đang làm quen với Redux chắc hẳn bạn đang rất mơ hồ về các khái niệm cơ bản của Redux như dispatch, store, action creator,... bạn còn đang vật lộn với đống document của Redux để hiểu những khái niệm đó và bạn nghe ai đó trong team nói về Redux Thu

0 0 395

- vừa được xem lúc

Uống Pepsi code Vue đi - Uống Cocacola code React nha ;)

. (Nguồn ảnh: Internet). Chào các bạn, chào các bạn. Let's go . 1.

0 0 144

- vừa được xem lúc

Cài đặt taillwind css cho dự án React

Trong bài viết cùng mình tìm hiểu cách cài đặt tailwind css cho một dự án React sẵn có. .

0 0 143

- vừa được xem lúc

Formik vs React Hook Form (Phần 1)

Các lập trình viên Front End đều làm việc rất nhiều với form cùng sự phức tạp của ứng dụng. Do vậy chúng ta cần những thư viện form mạnh mẽ hỗ trợ quản lý các form state, form validation... Thành phần module. Formik bao gồm có 9 dependencies khác. . React Hook Form thì không có.

0 0 365

- vừa được xem lúc

Hướng dẫn React Redux cho người mới bắt đầu - Phần 1

Lời mởi đầu. Chào các bạn, ở thời điểm thực hiện bài viết này mình cũng là một người đang bắt đầu tìm hiểu và học với ReactJs và Redux, trong quá trình tìm hiểu đọc các tài liệu về thư viện này mình có tìm được một bài hướng dẫn khá hay nên đã quyết định chia sẻ với mọi người .

0 0 278

- vừa được xem lúc

Làm ứng dụng học toán đơn giản với React Native - Phần 5

Chào mọi người, lại là mình đây Sau 1 thời gian vừa viết bài hướng dẫn, vừa viết code thì mình đã đưa được cái app cơ bản của mình lên google play. Đây là link: https://play.google.com/store/apps/details?id=com.

0 0 117