反應 redux 重新渲染不是由狀態變化觸發的

Question

我開始學習 react 和 react-redux，但我無法理解組件或容器如何知道狀態更改並重新渲染。 我嘗試了一個簡單的示例，但無法讓它按應有的方式工作。 我想要做的是顯示一個計數器和一個按鈕。 每次單擊按鈕時，計數器都應增加。 按鈕單擊調度一個動作並且狀態改變，但不知何故計數器沒有顯示在屏幕上。 它甚至沒有用 0 計數器顯示初始狀態。 我對前端開發也很陌生，所以也許它與 redux 無關，而是與 react 無關。

這是我的index.js

import store from "./store/configureStore"

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

配置Store.js

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

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

const configureStore = createStore(reducer)
export default configureStore;

我的計數器.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);

counter.js的 action 和 reducer

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};
};