Do you remember the counter **Reducer **we wrote in the counter lesson?
What if I want to add another one,
for example, to the login status
Let him look at him again
const counterReducer = (state = 1, action) => {
console.log(action);
switch (action.type) {
case "INCREMENT":
return state + 1;
case "DECREMENT":
return state - 1;
default:
return state;
}
};
export default counterReducer;
The *Reducer *, my friends, is the place where the data in the word state
And the way we will change the data
In the switch code
add LoginReducer.js to reducer folder
export default function LoginReducer(state =false, action) {
switch (action.type) {
case 'LOGIN':
return true
case 'DECREMENT':
return state - 1
default:
return state
}
}
IN action.js to action
folder
//the old code
export const increment = () => ({ type: 'INCREMENT', payload: 1 });
export const decrement = () => ({ type: 'DECREMENT', payload: 1 });
//we add this code
export const logIn = () => ({ type: 'LOGIN' });
export const logOUt = () => ({ type: 'LOGOUT'});
Note that we did not add the value of x here
Is this permissible? Yes
I can add it as well if you want, but here I wanted to tell you that yes, you can not add a value topayload
Because I have configured it in LoginReducer.js, please note the code in LoginReducer.js
Finally, create a file allReducers.js in Reducers folder
ther are many articles ,including official documenter called thes file index.js
but This makes me nervous
Because the Reikat project already has a file called index
import { combineReducers } from 'redux'
import LoginReducer from './LoginReducer'
import reducer from './reducer'
export default combineReducers({
LoginReducer,
reducer
})
Top comments (0)