Question

我有一个应用，其中使用了react-redux包中规定的 combineReducers 。所以在我连接的组件中，我有一个函数

function mapStateToProps(state){

    return { 
        listedComments: // a prop name
        state.allcomments // a reducer name
    }
}

...，其中allcomments是其中一个化简器的名称。但是我现在只有一个reducer，所以我想知道是否有可能根本不使用CombineReducers，而是继续使用该函数？

更新

我有一个应用，其中使用了react-redux包中规定的 combineReducers 。所以在我连接的组件中，我有一个函数

function mapStateToProps(state){

    return { 
        listedComments: // a prop name
        state.allcomments // a reducer name
    }
}

...，其中allcomments是其中一个化简器的名称。但是我现在只有一个reducer，所以我想知道是否有可能根本不使用CombineReducers，而是继续使用该函数？

更新

对不起，似乎我没有提供足够的细节。因此，该应用的结构如下：

actions
  default.js
components
  App.js
  Buttons.js
reducers
  default.js
index.js

它与CombineReducers完美配合，但并非没有它，因为代码中有错误。这是应用程序的各个部分（当然是非常原始的）负责该问题：

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import defaultReducer from './reducers/default'
import App from './components/App'

ReactDOM.render(
    <Provider store={createStore(defaultReducer, {})}>
        <App />
    </Provider>, 
    document.getElementById('root')
);

reducers / default.js

const defaultReducer = (state =0, action) => {

    switch (action.type) {
        case 'INCREMENT':
            return state + 1;
        case 'DECREMENT':
            return state - 1;
        default:
            return state;
    }
}
export default defaultReducer;

App.js

import React from 'react'
import Buttons from './Buttons'
import { connect } from 'react-redux'

class App extends React.Component {

    renderCount(){
        return this.props.count;
    }

    render() {

        return (
            <React.Fragment>
                <div>Hello again!</div>
                <hr />
                Look here: {this.renderCount()}
                <hr />
                <Buttons />
            </React.Fragment>
        )
    }
}

function mapStateToProps(store) {
    return { count: store.defaultReducer }
}

export default connect(mapStateToProps)(App)

我认为mapStateToProps可以使用存储，该存储应该由提供程序提供。但这是一个空对象。

Answer 1

您误解了mapStatetoProps()的全部含义。这个响应似乎是多余的，但是它的功能是将应用程序的状态映射到组件/容器中的props，就像名称所暗示的那样。 Reducer将更新应用程序的状态，并且通过使用mapStatetoProps()，您的组件/容器可以在其道具中体现这一点。我是不是误会了你的问题？

编辑：正如Zaid所说，您不需要使用combineReducers()，因为您可以拥有一个包含所有减速器的减速器。无论哪种方式，您都不会在mapStatetoProps()中专门引用化简器，并且确实需要使用此函数。像这样：

function mapStateToProps(state){    
    return { 
        listedComments: state.listedComments,
        allcomments: state.allComments
    }
}

在mapStateToProps()的帮助下，状态将被推入Redux's。确保您使用的是Redux's连接，以便将组件挂接到Redux中：

import { connect } from "react-redux";

编辑2：您的减速器不正确。您正在尝试增加状态（存储），这是不可能的。您需要具有递增状态的属性，例如“计数器”。请记住，您不应该改变状态。所以，像这样：

const initialState = {
  counter: 0
};
const defaultReducer = (state = initialState, action) => {

  switch (action.type) {
      case 'INCREMENT':
      return [
        ...state,
        {
          counter: state.counter + 1
        }
      ];
      case 'DECREMENT':
      return [
        ...state,
        {
          counter: state.counter - 1
        }
      ];
      default:
          return state;
  }
}
export default defaultReducer;

此外，createStore（）在我看来有点奇怪。我认为它应该看起来像这样（对此我可能完全错了）；

<Provider store={createStore(defaultReducer}>

Answer 2

似乎您对状态的状态感到困惑，说实话，最好是从实际的状态开始（例如，通过在console.log(state)上添加mapStateToProps）。

如果我们回到基础知识，那么reducer就是一个具有状态和操作并返回新状态的函数。这适用于所有减速器，包括您的defaultReducer。减速器返回的结果是商店的状态。因此，在您的情况下：

const defaultReducer = (state = 0, action) => {
  switch (action.type) {
    ...
    default: return state
  }
}

// you don't need the second parameter for createStore as you're not
// pre-populating the store with a specific non-default state. You
// can just rely on the default argument from your reducer to set the
// initial state.
const store = createStore(defaultReducer)

console.log(store.getState())
// outputs: 0

状态只是减速器返回的单个整数。而您的mapStateToProps最终将是：

const mapStateToProps = (state) => {
  return { count: state }
}

（请注意，mapStateToProps是传递给状态的，而不是商店本身，所以我们通常将其参数命名为state。）

是否可以在react-redux应用程序中不使用CombineReducers？

index.js

reducers / default.js

App.js

2 个答案: