Question

我是Redux的新手，我正在尝试调度和异步操作并返回响应数据更新的新状态。

我在这里：

App.js （容器组件）

import React, { Component } from 'react'
import { connect } from 'react-redux'

// import all actionCreators
import * as actions from '../actions/actionCreators'

// import component to pass props to
import Main from './Main'

const mapStateToProps = (state, { params, location, users }) => {
   const rootPage = params.rootPage || '';
   return {
      users,
      rootPage
   }
}

const App = connect(
   mapStateToProps,
   actions
)(Main);

export default App;

行动创作者

export const fetchRemoteData = (endpoint) => (dispatch, getState) => {
   return axios.get('https://jsonplaceholder.typicode.com/users').then(
      response =>
         dispatch({
            type: 'FETCH_REMOTE_DATA_SUCCESS',
            endpoint,
            response
         })
      )
}

组件

export default class Users extends Component {
   componentDidMount() {
      console.log('Component Mounted!')
      this.props.fetchRemoteData('users')
   }
   render() {
      const {users} = this.props
      console.log(users)
      const {rootPage} = this.props;
      return (
         <div>
            <h1>Users Page</h1>
            <p>This is the Users page and an example of how your app is working correctly</p>
            <p>rootPage: {rootPage}</p>
            {/*users.map(user =>
               <p>{user.name}</p>
            )*/}
         </div>
      )
   }
}

当我查看React Dev Tools时，users对象不存在，即使它在我的全局状态对象中。

这让我觉得我可能没有正确地将它映射到我的容器组件，但是我看不出它有什么问题......

Root Reducer

// import individual reducers
import users from './users'

const rootReducer = combineReducers({
   users,
   routing: routerReducer
})

export default rootReducer

我的API调用是在componentDidMount中进行的，而我的组件在收到响应后没有注册对redux状态所做的更改，这是否与此事件有关？

任何帮助表示感谢。

UPDATE：

我忘了在users: state.users函数中加入mapStateToProps。现在users对象在我的道具中，但它仍然不包含状态......

Main.js

import React, { Component } from 'react';
import { Link } from 'react-router'

export default class Main extends Component {
   render() {

      return (
         <div className='container'>
            <h2>Main.js (wrapped by App.js)</h2>
            <hr />
            <Link to='/'>Home</Link>
            {' | '}
            <Link to='/users'>Users</Link>
            {' | '}
            <Link to='/posts'>Posts</Link>
            <hr />

            {React.cloneElement(this.props.children, this.props)}
         </div>
      )
   }
}

注意：我正在将Users和Posts渲染为反应路由器的Router组件的子项。

新更新

好的，所以动作肯定会到达reducer，而减速器肯定会更新redux商店。

我现在拥有它，以便在调度操作后，Main组件的道具在安装Users组件后根据需要进行更新。

所以，我的问题几乎已经解决了。我认为现在的问题是关于componentDidMount的问题。响应有效负载使其成为Main组件道具的方式，但当我尝试将响应呈现为数据时，我什么也得不到。

Users渲染功能：

{this.props.users ?
   this.props.users.map(user => <p>{user.name}</p>) :
   <p>No data</p>
}

我得到的只是'没有数据'，我不知道如何将componentDidMount中返回的数据放到我的视图中。

我希望有点清楚 - 如果没有道歉。

为了充分披露，这是我的 reducer ：

const users = (state = [], action) => {
   switch(action.type) {
      case 'FETCH_REMOTE_DATA_SUCCESS' :
         if (action.response) {
            return action.response.data
         }
      default :
         return state;
   }
   return state;
}

export default users;

Answer 1

如果您通过mapStateToProps看到了正确的数据，那么您应该会在Main中看到正确的数据，这意味着将这些道具传递给Users也应该有效。

const mapStateToProps = (state, { params }) => {
  console.log(state.users) <--- make sure this is correct

  const rootPage = params.rootPage || '';
  return {
    users: state.users,
    rootPage
   }
}

然后在Main：

render() {
  console.log(this.props.users) <--- make sure this is correct

  return (
    ...
  )
}

如果以上两个步骤记录了不正确的数据，那么就会出现一些有减速器/动作的事情（听起来不像，那么好）。

如果这些是正确的，并且您没有在“用户”组件中获取正确的数据，则问题在于以下行：

{React.cloneElement(this.props.children, this.props)}

我认为可能需要以不同方式编写该位（但不是100％肯定）。我为我的孩子路线做了更全面的道具副本

let children = React.Children.map(this.props.children, child => {
  return React.cloneElement(child, {
    ...child.props,
    ...this.props,
  })
})

或者，您可以connect您的用户组件，这可能是一个好主意，因为它是实际使用的users

connect(state => ({ users: state.users }))(Users)

将API响应数据从Redux状态传递到组件道具

UPDATE：

新更新

1 个答案: