为什么 this.props.counter 为空？

Question

src/index.js

import React from 'react';
import createSagaMiddleware from 'redux-saga';
import combineReducers from './reducers';
import { configureStore } from '@reduxjs/toolkit'
import CustomCounter from './add'
import mySaga from './sagas';
import { createRoot } from "react-dom/client";

const sagaMiddleware = createSagaMiddleware();

export const store = configureStore({
  reducer: {combineReducers},
  middleware: [sagaMiddleware],
})

sagaMiddleware.run(mySaga);  
 
const container = document.getElementById("root");
const root = createRoot(container);
root.render(
  <Provider store={store}>
    <CustomCounter />
  </Provider>
);

src/add/index.js

import React from 'react';
import { connect } from 'react-redux';
import { increate, increateAsync } from '../actions';

export class CustomCounter extends React.Component {
  render() {
    return (
      <div>
        <p>:{this.props.counter}</p>
        <button onClick={()=>this.props.increate()}>自增</button>
        <button onClick={()=>this.props.increateAsync()}>异步自增</button>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    counter: state.counter
  }
}
  
export default connect(mapStateToProps, { increate, increateAsync })(CustomCounter);

src/sagas/index.js

import { all } from 'redux-saga/effects';
import { add } from './counter';

export default function* rootSaga() {
  yield all([
    add()
  ])
}

src/sagas/counter.js

import { put, takeEvery, delay } from 'redux-saga/effects';

function* increase() {
  yield delay(3000); 
 
  yield put({ type: 'INCREMENT' });
}

export function* add() {
  yield takeEvery('INCREMENT_ASYNC', increase);
}

src/reducers/index.js

import { combineReducers } from 'redux';
import counter from './counter';

export default combineReducers({
  counter
})

src/reducers/counter.js

const counter = (state = 1, action = {}) => {
  switch(action.type) {
    case 'INCREMENT':
      return state + 1;
        
    default:
      return state
  }
}
  
export default counter;

src/actions/index.js

export const increate = () => {
  return {
    type: 'INCREMENT'
  }
}  
  
export const increateAsync = () => {
  return {
    type: 'INCREMENT_ASYNC' ,   
  }
}

我的问题是，在

src/add/index.js

我想让页面显示

this.props.counter

但是

this.props.counter

总是空的，无法显示结果。我想让页面显示

this.props.counter

的计算结果和初始值1.

Answer 1

问题

包含

count

状态的组合reducer函数被导入为

combineReducers

：

src/reducers/index.js

import { combineReducers } from 'redux';
import counter from './counter';

export default combineReducers({
  counter
});

src/index.js

import combineReducers from './reducers';

但是当配置商店时，传递的方式是将 reducer 函数/状态嵌套在一个也名为

combineReducers

的属性中：

src/index.js

...
import combineReducers from './reducers';
import { configureStore } from '@reduxjs/toolkit';
...

export const store = configureStore({
  reducer: {
    combineReducers // <-- nested
  },
  middleware: [sagaMiddleware],
});

所以不是预期的

state.counter

可用它实际上是

state.combineReducers.counter

.

src/add/index.js

const mapStateToProps = (state) => {
  return {
    counter: state.counter // <-- not defined
  };
};

解决方案

传递组合减速器功能作为根减速器。

例子：

src/index.js

...
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';
...

export const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => 
    getDefaultMiddleware().concat(sagaMiddleware),
});