如何使用根减速器配置存储

Question

我正在尝试设置一个商店来包含我的应用程序的两个不同部分的状态：一个待办事项应用程序和一个计数器。但我一直在浏览器中收到TypeError: store.getState is not a function

所以我设置了两个减速器，一个用于计数器counterReducer，另一个用于消息messageReducer。

这是我的消息缩减器的代码

const ADD = "ADD";

export const messageReducer = (messageState = [], action) => {
  switch (action.type) {
    case ADD:
      return messageState.concat(action.message);
      // eslint-disable-next-line
      break;
    default:
      return messageState;
  }
};

这是我的计数器减速器的代码

const DECREMENT = "DECREMENT";

export const counterReducer = (counterState = 0, action) => {
  switch (action.type) {
    case INCREMENT:
      return counterState + 1;
    case DECREMENT:
      return counterState - 1;
    default:
      return counterState;
  }
};

我正在使用 combineReducers 来获取 root reducer，如下所示

import { combineReducers } from "redux";
import { messageReducer } from "./messageReducer";
import { counterReducer } from "./counterReducer";

export const rootReducer = combineReducers({
  message: messageReducer,
  counter: counterReducer
});

这是我的商店

import { createStore, applyMiddleware } from "redux";
import { rootReducer } from "./reducers/rootReducer";
import thunk from "redux-thunk";

export const store = (state = {}) => {
  return createStore(rootReducer, state, applyMiddleware(thunk));
};

这是我的提供程序文件，我将商店提供给我的应用程序

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { store } from "./store";

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.

最后，这是我的应用程序，带有演示组件和连接功能

import React, { Component } from "react";
import { connect } from "react-redux";
import "./App.css";
import { addMessage } from "./actions/addMessage";
import { increment } from "./actions/increment";
import { decrement } from "./actions/decrement";

const mapStateToProps = state => {
  return {
    messages: state.messageState,
    count: state.counterState
  };
};

const mapDispatchToProps = dispatch => ({
  increaseCounter: () => dispatch(increment()),
  decreaseCounter: () => dispatch(decrement()),
  submitNewMessage: message => dispatch(addMessage(message))
});

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ""
    };
    this.handleChange = this.handleChange.bind(this);
    this.submitMessage = this.submitMessage.bind(this);
    this.onIncrement = this.onIncrement.bind(this);
    this.onDecrement = this.onDecrement.bind(this);
  }

  handleChange(e) {
    this.setState({ input: e.target.value });
  }

  submitMessage() {
    this.setState({
      input: ""
    });
    this.props.submitNewMessage(this.state.input);
  }

  onIncrement() {
    this.props.increaseCounter();
  }

  onDecrement() {
    this.props.decreaseCounter();
  }

  render() {
    const messagesRender = this.props.messages.map(item => <li>{item}</li>);
    const styles = {
      container: {
        display: "grid",
        justifyItems: "center"
      }
    };
    return (
      <div style={styles.container}>
        <div>
          <h2>Type in a new Message:</h2>
          {/* render an input, button, and ul here */}
          <input value={this.state.input} onChange={this.handleChange} />
          <button onClick={this.submitMessage}>submit</button>
          <ul>{messagesRender}</ul>
          {/* change code above this line */}
        </div>
        <div>
          <h2>Counter App</h2>
          <button onClick={this.onIncrement}>Increment</button>
          <button onClick={this.onDecrement}>Decrement</button>
          <div>{this.props.count}</div>
        </div>
      </div>
    );
  }
}

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

这是我遇到的错误。有人请联系

Answer 1

在您的商店文件中，您正在导出一个创建商店而不是商店对象本身的函数。

如果您不需要设置初始状态，您可以将您的store.js 更改为：

const store = createStore(rootReducer, {}, applyMiddleware(thunk));

export store;