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来获取根减速器，如下所示

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

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

如果不需要设置初始状态，则可以将import typing def subplots() -> typing.Tuple[plt.Figure, plt.Axes]更改为：

store.js

如何使用root Reducer配置存储

1 个答案: