给定动作“Movies_List”，reducer 返回 undefined

Question

我正在开发我的第一个带有 react、react-router 和 redux 的 react 应用程序...... 在这里，我正在尝试制作一个显示电影名称的应用程序。而且我不知道我在做什么错..

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';

import reducers from './reducers';

import App from './app';

const createStoreWithMiddleware = applyMiddleware()(createStore)

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
      <App />
  </Provider>
  , document.querySelector('.container'));

src/app.js

import React, {Component} from 'react';
import MoviesList from './containers/movies_list';

class App extends Component {


   render(){
    return(
      <div>
        <MoviesList />
      </div>
    )
  }
}


export default App;

src/reducers/index.js

import { combineReducers } from 'redux';
import movies from './movies_reducer';

const rootReducer = combineReducers(
  {movies}
);

导出默认的rootReducer；

src/reducers/movies_reducer.js

 export default function(state = null, action){

switch(action.type){
  case'MOVIES_LIST':
      return action.payload;
  default:
      return state;
  }
}

src/action.index.js

export function moviesList() {
return{
  type: 'MOVIES_LIST',
  payLoad: [
    {id:1, name:"Lagan"},
    {id:2, name:"Robot"},
    {id:3, name:"Gold"}
  ]
 }
}

src/containers/movies_list.js

import React, {Component} from 'react';
import { connect } from 'react-redux';
import * as actions from '../actions';


class MoviesList extends Component {

  componentWillMount(){
    this.props.moviesList()
  }

  renderList = (movies) => {
    if(movies){
      return movies.map((movie) => {
        return(
          <div>{movie.name}</div>
        )
      })
    }
  }

   render(){
    return(
      <div>
        {this.renderList(this.props.movies)}
      </div>
    )
  }
}

function mapStateToProps(state){[![enter image description here][1]][1]
  console.log(state)
   return{
    movies:state.movies
  }
}

export default connect(mapStateToProps,actions)(MoviesList);

它显示像这样的错误......

bundle.js 错误图片

Answer 1

您的moviesList() 动作创建器中有错字（注意payLoad => payload）：

export function moviesList() {
  return {
    type: 'MOVIES_LIST',
    payload: [
      {id:1, name:"Lagan"},
      {id:2, name:"Robot"},
      {id:3, name:"Gold"},
    ],
  };
}