我正在使用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);
它显示这样的错误...
答案 0 :(得分:0)
您的moviesList()
动作创建者中有错字(请注意payLoad
=> payload
)
export function moviesList() {
return {
type: 'MOVIES_LIST',
payload: [
{id:1, name:"Lagan"},
{id:2, name:"Robot"},
{id:3, name:"Gold"},
],
};
}