реагировать на редукцию, не вызывать изменения состояния

Question

Я начал изучать реагировать и реагировать на избыточность, но я не могу понять, как компоненты или контейнеры узнают об изменении состояния и затем выполнить повторную визуализацию. Я попробовал простой пример, но не могу заставить его работать так, как должен. Я пытаюсь показать счетчик и кнопку. При каждом нажатии кнопки счетчик должен увеличиваться. Нажатие кнопки отправляет действие, и состояние изменяется, но каким-то образом счетчик не отображается на экране. Его даже не показывается начальное состояние со счетчиком 0. Я также очень новичок в разработке внешнего интерфейса, так что, возможно, это не имеет ничего общего с редуксом, но с реакцией.

Вот мой индекс. js

import store from "./store/configureStore"

render(
<Provider store={store}>
    <Countercont></Countercont>
</Provider>
, document.getElementById('root'));

configureStore. js

import {combineReducers, createStore} from 'redux'
import counterReducer from "./modules/counter"

const reducer = combineReducers({
    tmp: counterReducer });

const configureStore = createStore(reducer)
export default configureStore;

Mycounter. js

const Mycounter = ({counter, inc}) => (
<div>
    <p>"counter"</p>
    <p>{counter}</p>
    <Button onClick={inc}>Inc</Button>
</div>
)

export default Mycounter

countercont. js контейнерный компонент

const Countercont = ({counter, inc}) => {
    return (
        <div>
            <Mycounter counter={counter} inc={inc}/>
        </div>
    )
}
const mapStateToProps = state => {
    return {counter: state.counter};
};

const mapDispatchToProps = dispatch => {
    return {inc: () => dispatch(inc())}
};

export default connect(mapStateToProps, mapDispatchToProps)(Countercont);

счетчик. js действие и редуктор

export default function reducer(state = {counter: 0}, action) {
    console.log(state) //-> shows the correct state
    switch (action.type) {
        case "c":
            console.log("Inc")
            return {...state, counter: state.counter + 1}
        default:
            return state
    }
}

export function inc() {
    return {type: "c"}
}

Answer 1

Состояние вашего счетчика определено внутри counterReducer, которое зарегистрировано для tmp ключа

const reducer = combineReducers({
   tmp: counterReducer
});

Так, чтобы получить это значение, ваш компонент mapStateToProps обратный вызов должен получить это значение из целого состояния, используя ваш ключ редуктора, который tmp в вашем коде

Таким образом, он должен выглядеть как

const mapStateToProps = state => {
    return {counter: state.tmp.counter};
};

вместо

const mapStateToProps = state => {
    return {counter: state.counter};
};