React Redux 将状态作为 props 传递给组件

React Redux pass state as props to component

本文关键字：组件 props Redux 状态 React      更新时间：2023-09-26

在我的 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;

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

和我的地图状态到道具函数看起来像： 

function mapStateToProps(state) {
  return {
    movies: state.movies
  };
}
相关文章：