Redux Toolkit Starter
// 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>
)
}
Tham gia cuộc trò chuyện