這個 Redux (react) 應用程序可能有什么問題？

Question

我的代碼有問題，但我似乎無法弄清楚出了什么問題。

我正在嘗試在單個 App 組件上創建一個項目，以獲得更好的理解，但我無法獲得heroes狀態。

我想更好地了解 Redux，在這個項目之后，我將文件分開，但我發現只使用一個應用程序啟動會更容易。

我的代碼

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()，為了在 App 組件上調度 action 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);

Answer 2

看看連接...

您的代碼的示例用法：

const mapDispatchToProps = {
    getHeros: getHeros
};

const mapStateToProps = state => {
    return {
        heros: state.heros
    }
}

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