Foreword: according to incomplete statistics: “a website can retain a user’s time only 8S, if you can’t attract users within 8S, or the website has problems, then you will completely lose this user!”

A, the React redux

1. Why redux? In React, we store state in this.state for each component. Each component’s state is private to the component. If component B wants to change the state of component C, it needs to pass related variables or methods to each other. If both components have a very deep level, then all components in the process will trigger a re-rendering, resulting in a huge amount of overhead. The component B < -… – component – A… –> Component C.

Install redux and react-redux

npm install redux
npm install react-redux
Copy the code

3. Keywords

  • App. The TSX composite file:
// app.tsx introduces createStore and Provider
import { createStore } from "redux";
import { Provider } from "react-redux"; .// Create initial state data for Store
const initialState = {
    todos: [{      
            id: 1.text: "Hello, tootlark.".completed: false}].filter: false}; .const rootReducer = (state, action) = > {  
    returnstate; }; .// The createStore function passes in defined 'rootReducer' and 'initialState'
conststore = createStore(rootReducer, initialState); . ReactDOM.render(// Wrap the App component with Provider and receive the store so that the component can access the state in the Store
    <Provider store={store}>    
        <App />  
    </Provider>.document.getElementById("root"));
Copy the code
  • Child components
/ / introduction of the connect
import { connect } from "react-redux"; 

class App extends React.Component { 
render() {    
    // Use the properties in store directly
    const { todos, filter } = this.props;
    return(...). ; }}// the mapStateToProps function operates on both the original 'props' and the Store state of the component, and then merges it into the final component props
const mapStateToProps = (state, props) = > ({  
    todos: state.todos,  
    filter: state.filter
}); 

/** Connect takes the final combination of the functions returned by mapStateProps, gets the state of the final combination returned by mapStateProps, and then injects it into the App component to return a new component, It is then exported to 'export Default'. * /
export default connect(mapStateToProps)(App);
Copy the code
  • Create a SRC/actions/index. Ts
let nextTodoId = 0;
export const addTodo = text= > ({  
    type: "ADD_TODO".id: nextTodoId++,  
    text
});
Copy the code
  • Component uses actions
import { connect } from "react-redux";
import { addTodo } from ".. /actions";

const AddTodo = ({ dispatch }) = > {  
      let input;
      return (    
      <div>      
      <form onSubmit={e= >{ e.preventDefault(); if (! input.value.trim()) { return; } dispatch(addTodo(input.value)); input.value = ""; }} ><input ref={node= > (input = node)} />        
          <button type="submit">Add Todo</button>      
       </form>    
       </div>  
    );
};

The /** 'connect' function, which is responsible for injecting state from the Store into the component, also passes an additional method to the component: 'dispatch', so we can get this method */ in the component's 'props'
export default connect()(AddTodo);
Copy the code
  • Reducers

Create a SRC/index. Js

/ / define rootReducer
const rootReducer = (state, action) = > {  
    switch (action.type) {    
    case "ADD_TODO": {      
    const { todos } = state;
    return {        
      ...state,        
      todos: [          
          ...todos,          
          {            
              id: action.id,            
              text: action.text,            
              completed: false}}; }default:      
        returnstate; }};Copy the code

Detailed link: mp.weixin.qq.com/s?__biz=MzA…