redux
Redux is a state management library
1 Create Initial State
2 Define Action Types
3 Define Action Creators
4 Create Reducers
5 Change the initial State
6 Pass the parameters to the Creator function and the reducers
Code
// Initial State
const initialState = {
todos: [
{
text: "eat food",
},
{
text: "Exercise",
},
],
};
// Action Types
// create a simple action type
const ADD_TODO = "ADD_TODO";
// ACtion creators
function addTodo(text) {
return {
type: ADD_TODO,
payload: text,
};
}
//create reducers
function todoReducer(state = [], action) {
switch (action.type) {
case ADD_TODO:
return [...state.todos, { text: action.payload }];
default:
return state;
}
}
console.log("Initial State : ", initialState);
// Lets make changes to initial states
const action = addTodo("Make it work");
const newState = todoReducer(initialState, action);
console.log(newState);
4.6
5
Use Redux tool kit
Thank you!
5
0
3.5
2
> Redux is an open-source JavaScript library for managing application state.
> It is most commonly used with libraries such as React or Angular for
building user interfaces.
Thank you!
2
0
3.7
10
npm install redux // adding redux to the project
// creating types
export const SET_USER = 'SET_USER'
//creating actions
export const setUser = user => {
return {
type : SET_USER,
payload : {
currentUser : user
}
}
// creating reducers
const user_reducer = (state=intialState,action)=>{
switch(action.type){
case SET_USER :
return {
currentUser : action.payload.currentUser
}
}
Thank you!
10
0
0
8
// component.js
showNotificationWithTimeout(this.props.dispatch, 'You just logged in.')
// otherComponent.js
showNotificationWithTimeout(this.props.dispatch, 'You just logged out.')
复制代码
Thank you!
8
0
4
2
npm install redux // adding redux to the project
// creating types
export const SET_USER = 'SET_USER'
//creating actions
export const setUser = user => {
return {
type : SET_USER,
payload : {
currentUser : user
}
}
// creating reducers
const user_reducer = (state=intialState,action)=>{
switch(action.type){
case SET_USER :
return {
currentUser : action.payload.currentUser
}
}
Thank you!
2
0
Are there any code examples left?
New code examples in category Other
-
Other 2023-03-27 22:50:10 how to select the whole line in vscode with keyboard shortcut
-
Other 2022-03-27 22:45:24 income of a web developer
-
Other 2022-03-27 22:35:01 \pyrcc_main.py: File does not exist 'resources.qrc'
-
Other 2022-03-27 22:30:45 rick roll embed code
-
Other 2022-03-27 22:20:08 Circuit_04_Potentiometer
-
Other 2022-03-27 22:20:05 iterative power
-
Other 2022-03-27 22:15:11 flutter run all
-
Other 2022-03-27 22:10:05 when is karlson release
-
Other 2022-03-27 22:10:02 wp .htaccess example
-
Other 2022-03-27 22:00:08 bash pause in file read line by line