コンポーネントへの小道具としての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機能で誤っ状態にアクセスしていました。私が関数内にデバッガを配置したとき、私は状態の構造を見ることができ、そこにアクセスしようとしていたものと一致しませんでした。

私の店の状態は、このように見えたので：

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

私はこのように私のコンポーネントで私mapStateToProps機能を変更するために必要な：

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 
    }; 
}