1Copynpx create-react-app my-app --template redux

1Redux is a state management library
21 Create Initial State
32 Define Action Types
43 Define Action Creators
54 Create Reducers
65 Change the initial State
76 Pass the parameters to the Creator function and the reducers
8
9Code
10// Initial State
11
12const initialState = {
13  todos: [
14    {
15      text: "eat food",
16    },
17    {
18      text: "Exercise",
19    },
20  ],
21};
22
23// Action Types
24// create a simple action type
25
26const ADD_TODO = "ADD_TODO";
27
28// ACtion creators
29
30function addTodo(text) {
31  return {
32    type: ADD_TODO,
33    payload: text,
34  };
35}
36
37//create reducers
38function todoReducer(state = [], action) {
39  switch (action.type) {
40    case ADD_TODO:
41      return [...state.todos, { text: action.payload }];
42    default:
43      return state;
44  }
45}
46
47console.log("Initial State : ", initialState);
48
49// Lets make changes to initial states
50const action = addTodo("Make it work");
51const newState = todoReducer(initialState, action);
52
53console.log(newState);

1yarn add react-redux

1Use Redux tool kit

1// component.js
2showNotificationWithTimeout(this.props.dispatch, 'You just logged in.')
3
4// otherComponent.js
5showNotificationWithTimeout(this.props.dispatch, 'You just logged out.')  
6复制代码