javascript - 如何使用根 reducer 配置存储

Question

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

所以我设置了两个 reducer ，一个用于计数器 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;
  }
};

这是我的计数器 reducer 的代码

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来获取根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;