javascript - Some questions for beginners learning Redux

Question

After reading a lot of information, I still don’t understand Redux very well
1. For the global State, which is managed by the Store, where is it initially generated? How was it added later? After adding, are they all in the same {}? Make sure that all attributes do not have the same name

2. In Redux mode, does each component (component that requires state) need to be bound with
connect( mapStateToProps , mapDispatchToProps )(Component);?

3. Will all Reducers receive an Action?

Then the code I wrote in a dazed state cannot run and there is no error message:

import React from "react";
import ReactDOM from "react-dom";
import {createStore,bindActionCreators,combineReducers} from "redux";

import {Provider,connect} from "react-redux";

class Counter extends React.Component {
    render() {
        let { value1, onIncreaseClick, onDecreaseClick, value2, onDoubleClick, onResetClick } = this.props;
        return (
            <p>
                <p>
                    <p>{value1}</p>
                    <button onClick={onIncreaseClick}>Increase</button>
                    <button onClick={onDecreaseClick}>Decrease</button>
                </p>
                <p>
                    <p>{value2}</p>
                    <button onClick={onDoubleClick}>Double</button>
                    <button onClick={onResetClick}>Reset</button>
                </p>
            </p>
        )
    }
}
function mapStateToProps(state) {
    return { //obj
        value1:state.count,
        value2:state.count
    }
}
function mapDispatchToProps(dispatch) {
    return { //obj
        onIncreaseClick(){
            dispatch({type:"increase"});
        },
        onDecreaseClick(){
            dispatch({type:"decrease"});
        },
        onDoubleClick(){
            dispatch({type:"double"});
        },
        onResetClick(){
            dispatch({type:"reset"});
        }
    }
}

function counter1(state = { count: 0 }, action) {
    let count = state.count;
    switch (action.type) {
        case 'increase':
            return { count: count + 1 };
        case 'decrease':
            return { count: count-1 };
        default:
            return state;
    }
}
function counter2(state = { count: 0 }, action) {
    let count = state.count;
    switch (action.type) {
        case 'double':
            return { count: count*2 };
        case 'reset':
            return { count: 0 };
        default:
            return state;
    }
}
let rootReducer = combineReducers({
    counter1,
    counter2
});
let store = createStore(rootReducer);
let CounterCompo = connect(
    mapStateToProps,
    mapDispatchToProps
)(Counter);
ReactDOM.render(<Provider store={store}>
    <CounterCompo/>
</Provider>,document.getElementById('container'));

Answer 1

Found the problem. . . . Pitfalls of combineReducers After using it, the State is divided into respective Reducers

Answer 2

In fact, redux is very simple. An action represents the changed action, and the corresponding reducer represents the effect of the corresponding action.
Using redux is just a sentence: whichever component changes data, dispatch (action) in the corresponding component, whichever component needs to use the data in the store, pass the required mapStateToProps parameter to connect, the two are independent of each other.

Answer 3

1. In fact, to be precise, Reducer is where the store is defined. Each Reducer can be separated and then combined together using combineReducers.
2. It is recommended to only bind high-level components, and then interact with low-level components through high-level components.
3. You can receive it all.

It is recommended to start from the official Demo.

Answer 4

http://huziketang.com/books/r...

Answer 5

After reading a lot of information, I still don’t understand Redux very well. 1. For the global State, which is managed by the Store, where is it initially generated? How was it added later? After adding, are they all in the same {}? Do you have to ensure that all attributes do not have duplicate names? Answer: The initial data can be configured in the second parameter of createStore. The reducer will return a new state to the store. I did not understand that your attributes are duplicated. What does the name mean?
2. In Redux mode, does every component (component that requires state) need to be bound with

connect( mapStateToProps , mapDispatchToProps )(Component);?

Not necessarily

3. Will all Reducers receive an Action?

Every action will trigger the corresponding reducer