javascript - 这个 Redux (react) 应用程序可能存在什么问题？

Question

我的代码遇到了问题，但我似乎无法弄清楚出了什么问题。

我正在尝试在单个应用程序组件上创建一个项目，以更好地理解，但我无法获得 heroes 状态。

我想更好地了解 Redux，在这个项目之后，我将分离这些文件，但我发现只使用一个应用程序来启动会更容易。

My Code

import React from 'react';
import './App.css';
import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import { Provider, connect } from 'react-redux';
import thunk from 'redux-thunk';
import PropTypes from 'prop-types';

const initialState = {
  heroes: [
    {id: 1, name: 'Superman'},
    {id: 2, name: 'Batman'},
    {id: 3, name: 'Robin'},
    {id: 4, name: 'Spiderman'},
    {id: 5, name: 'Thor'}
  ]
}
const GET_HEROES = 'GET_HEROES';

const getHeroes = () => {
  return {
    type: GET_HEROES,
    text: 'Getting all the heroes'
  }
}

const heroReducer = function(state = initialState, action) {
  switch(action.type) {
    case GET_HEROES:
      console.log(state);
      return { ...state }
    default:
      console.log(state);
      return state
  }
}
const rootReducer = combineReducers ({
  hero: heroReducer
});

const store = createStore(rootReducer, initialState, applyMiddleware(thunk));

class App extends React.Component {



  componentDidMount() {
    getHeroes();
  }

  render() {
    return (
      <Provider store={store}>
        <h1>Hello world</h1>
        <ul>
          {[1,2,3].map(item => (
            <li>{item}</li>
          ))}
        </ul>
      </Provider>
    );
  };
}

App.propTypes = {
  getHeroes: PropTypes.func.isRequired,
  hero: PropTypes.object.isRequired
}

export default (App);

Answer 1

应用程序无法获取英雄状态，因为它没有连接到 redux。您可以使用“connect”函数在应用程序和 redux 中间件之间建立连接。您还需要在连接函数中添加mapStatetoProps()和mapDispatchtoProps()。

• mapStatetoProps()，用于将App组件与redux连接。
• mapDispatchProps()，以便在应用程序组件上分派(dispatch)操作 redux。

代码应该是这样的:

index.js

import React from 'react';
import App from './App.js';
import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import { Provider, connect } from 'react-redux';
import thunk from 'redux-thunk';
import PropTypes from 'prop-types';

const initialState = {
  heroes: [
    {id: 1, name: 'Superman'},
    {id: 2, name: 'Batman'},
    {id: 3, name: 'Robin'},
    {id: 4, name: 'Spiderman'},
    {id: 5, name: 'Thor'}
  ]
}
const GET_HEROES = 'GET_HEROES';

const getHeroes = () => {
  return {
    type: GET_HEROES,
    text: 'Getting all the heroes'
  }
}

const heroReducer = function(state = initialState, action) {
  switch(action.type) {
    case GET_HEROES:
      console.log(state);
      return { ...state }
    default:
      console.log(state);
      return state
  }
}
const rootReducer = combineReducers ({
  hero: heroReducer
});

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

const app = (
  <Provider store={store}>
      <App />
  </Provider>
);

ReactDOM.render(app, document.getElementById('root'));

app.js

import React from 'react';
import './App.css';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

class App extends React.Component {
  componentDidMount() {
    this.props.ongetHeroes();
  }

  render() {
    return (
      <h1>Hello world</h1>
        <ul>
        {[1,2,3].map(item => (
          <li>{item}</li>
        ))}
      </ul>
    );
  };
}

App.propTypes = {
  getHeroes: PropTypes.func.isRequired,
  hero: PropTypes.object.isRequired
}

const mapStateToProps = (state) => {
  return {
    heroes: state.hero.heroes
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    ongetHeroes : () => dispatch(getHeroes()),
  };
};

export default connect(mapStatetoProps, mapDispatchtoProps)(App);