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

Question

我对 Redux 很陌生，我正在尝试分派和异步操作以及 return 由响应数据更新的新状态。

这是我所在的位置：

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 对象不存在，即使它在我的全局状态对象中。

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

根减速器

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

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

export default rootReducer

是否与我的 API 调用是在 componentDidMount 中进行的事实有关，并且我的组件在收到响应后尚未注册对 redux 状态所做的更改？

感谢任何帮助。

更新：

我忘记在我的 mapStateToProps 函数中包含 users: state.users。现在 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 渲染为 React 路由器的 Router 组件的子项。

新更新

好的，所以动作肯定是到达了 reducer，reducer 肯定是在更新 redux store。

我现在有了它，以便在分派操作后，Main 组件的道具会根据需要更新，在 Users 组件已安装后。

所以，我的问题差不多解决了。我认为现在的问题是 componentDidMount。响应有效载荷正在通往 Main 组件道具，但是当我尝试将响应呈现为数据时，我什么也得不到。

Users 渲染函数：

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

我得到的只是 'No data'，我不知道如何将 return 在 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 (
    ...
  )
}

如果上述两个步骤记录了不正确的数据，那么 reducer/actions 出现了问题（听起来不是，很好）。

如果这些是正确的并且您没有在用户组件中获得正确的数据，那么问题出在这一行：

{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 状态传递到组件道具

Passing API response data from Redux state to component props

javascript

asynchronous

reactjs

redux

react-redux

更新：

新更新