구성 요소에 소품으로 Redux 통과 상태를 반품하십시오.

Question

내 React Redux 애플리케이션에서 기본 페이지가로드 될 때 API에서 데이터를 가져 와서 사용자가 볼 수 있도록 표시하려고합니다. 작업에서 데이터를 가져오고 상태가 업데이트됩니다. 그러나 나는 국가를 구성 요소의 소품으로 보지 않을 것이다. 무엇이 제대로 연결되어 있는지 확실하지 않습니다.

홈 구성 요소 :

import React, { Component, PropTypes } from 'react'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import * as actions from '../actions/actions'; 
import '../styles/homeStyles.css'; 

class Home extends Component { 
    constructor(props) { 
    super(props); 
    } 

    componentDidMount() { 
    this.props.actions.fetchMovies(); 
    } 

    render() { 
    const { movies, isFetching, errorMessage } = this.props; 

    if (isFetching && !movies.length) { 
     return <p>Loading...</p>; 
    } 

    //will display movies when I have access to state 
    return (
     <div> 
     <h1>React Starter App</h1> 
     <h2>This is the home page</h2> 
     </div> 
    ); 
    } 
} 

Home.proptypes = { 
    actions: PropTypes.object.isRequired, 
    dispatch: PropTypes.func.isRequired, 
    movies: PropTypes.array.isRequired, 
    isFetching: PropTypes.bool.isRequired, 
    errorMessage: PropTypes.string 
}; 

function mapStateToProps(state) { 
    return { 
    movies: state.movies, 
    isFetching: state.isFetching, 
    errorMessage: state.errorMessage 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return { actions: bindActionCreators(actions, dispatch) }; 
} 

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

가기 :

import { createStore, applyMiddleware } from 'redux'; 
import thunkMiddleware from 'redux-thunk'; 
import createLogger from 'redux-logger'; 
import { syncHistoryWithStore } from 'react-router-redux'; 
import { browserHistory } from 'react-router'; 

import rootReducer from '../reducers/index'; 

const initialState = { 
    movies :{ 
    movies: [], 
    isFetching: false, 
    errorMessage: null, 
    firstName: null, 
    lastName: null, 
    email: null 
    } 
}; 

const store = createStore(rootReducer, initialState, applyMiddleware(thunkMiddleware, createLogger())); 

export const history = syncHistoryWithStore(browserHistory, store); 

if (module.hot) { 
    module.hot.accept('../reducers/',() => { 
    const nextRootReducer = require('../reducers/index').default; 
    store.replaceReducer(nextRootReducer); 
    }); 
} 

export default store; 

앱 :

import React, { Component } from 'react'; 
import Navbar from './Navbar'; 

class App extends Component { 
    render() { 
    return (
     <div> 
     <Navbar /> 
     <div className="container"> 
      {this.props.children} 
     </div> 
     </div> 
    ); 
    } 
} 

export default App; 

지수 :

import React from 'react'; 
import {render} from 'react-dom'; 
import { Provider } from 'react-redux'; 
import { Router, Route, IndexRoute } from 'react-router'; 
import store, { history } from './store/store'; 
require('./favicon.ico'); 
import App from './components/App'; 
import Home from './components/Home'; 
import Contact from './components/Contact'; 
import NotFoundPage from './components/NotFoundPage'; 

const router = (
    <Provider store={store}> 
    <Router history={history} > 
     <Route path="/" component={App}> 
     <IndexRoute component={Home} /> 
     <Route path="/contact" component={Contact} /> 
     <Route path="*" component={NotFoundPage} /> 
     </Route> 
    </Router> 
    </Provider> 
); 

render(router, document.getElementById('app')); 

감속기 :

import * as constants from '../constants/constants'; 

const initialState = { 
    movies: [], 
    isFetching: false, 
    errorMessage: null 
}; 

const moviesReducer = (state = initialState, action) => { 
    switch (action.type) { 
    case constants.FETCH_MOVIES : 
     return { 
     ...state, 
     isFetching: true 
     }; 
    case constants.FETCH_MOVIES_SUCCESS : 
     return { 
     ...state, 
     movies: [action.data], 
     isFetching: false 
     }; 
    case constants.FETCH_MOVIES_ERROR : 
     return { 
     ...state, 
     isFetching: false, 
     errorMessage: action.message 
     }; 
    default : 
     return state; 
    } 
}; 

export default moviesReducer; 

Answer 1

내 mapStateToProps 기능을 잘못 상태에 접근했다. 함수 내부에 디버거를 배치했을 때 상태 구조를 볼 수 있었고 거기에 액세스하려고했던 것과 일치하지 않았습니다. 내 가게의 상태가이처럼 보였다 때문에

:

내가 같이 내 구성 요소에서 내 mapStateToProps의 기능을 변경하는 데 필요한

const initialState = { 
    movies :{ 
    movies: [], 
    isFetching: false, 
    errorMessage: null, 
    firstName: null, 
    lastName: null, 
    email: null 
    } 
}; 

:이 모든 것을 허용

function mapStateToProps(state) { 
    return { 
    movies: state.movies.movies, 
    isFetching: state.movies.isFetching, 
    errorMessage: state.movies.errorMessage 
    }; 
} 

정확하고에 매핑 할 구성 요소 내부의 상태에 액세스 할 수 있습니다.

는 그 이후로 나는 같이하는 가게에서 내 상태를 리팩토링 :

const initialState = { 
    movies: { 
    movies: [], 
    isFetching: false, 
    errorMessage: null 
    }, 
    form: { 
    firstName: null, 
    lastName: null, 
    email: null 
    } 
}; 

을 내 mapStateToProps처럼보고 기능 :

function mapStateToProps(state) { 
    return { 
    movies: state.movies 
    }; 
}