install redux toolkit
npm install @reduxjs/toolkit react-redux
redux toolkit
import { createSlice } from '@reduxjs/toolkit';
export const counterSlice = createSlice({
name: 'counter',
initialState: {
value: 0,
},
reducers: {
increment: state => {
state.value += 1;
},
decrement: state => {
state.value -= 1;
},
incrementByAmount: (state, action) => {
state.value += action.payload;
},
},
});
export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export const selectCount = state => state.counter.value;
export default counterSlice.reducer;
redux toolkit reducer
import {createAction, createReducer} from '@reduxjs/toolkit ;
//Action
const add = createAction('add');
//Reducer
const Reducer = createReducer(initialState= 0, (builder)=>{
builder.addCase(add, (state,action) => state + 1)
})
redux toolkit
import { createSlice } from '@reduxjs/toolkit'
// Slice
const slice = createSlice({
name: 'user',
initialState: {
user: null,
},
reducers: {
loginSuccess: (state, action) => {
state.user = action.payload;
},
logoutSuccess: (state, action) => {
state.user = null;
},
},
});
export default slice.reducer
// Actions
const { loginSuccess, logoutSuccess } = slice.actions
export const login = ({ username, password }) => async dispatch => {
try {
// const res = await api.post('/api/auth/login/', { username, password })
dispatch(loginSuccess({username}));
} catch (e) {
return console.error(e.message);
}
}
export const logout = () => async dispatch => {
try {
// const res = await api.post('/api/auth/logout/')
return dispatch(logoutSuccess())
} catch (e) {
return console.error(e.message);
}
}
Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us