javascript - 将 API 响应数据从 Redux 状态传递到组件 props

Question

我是 Redux 的新手，我正在尝试分派(dispatch)和异步操作并返回由响应数据更新的新状态。

这里是我所在的地方:

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;

Action 创作者

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

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

根 reducer

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

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

export default rootReducer

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

感谢任何帮助。

---

更新:

我忘记在我的 mapStateToProps 函数中包含 users: state.users。现在 users 对象在我的 Prop 中，但它仍然不包含状态...

---

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 组件的子组件。

---

新更新

好的，所以 Action 肯定会到达 reducer，reducer 肯定会更新 redux store。

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

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

Users 渲染函数:

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

我得到的只是“无数据”，我不知道如何将 componentDidMount 中返回的数据放入我的 View 中。

我希望这更清楚一些 - 如果不明白，我们深表歉意。

为了完全公开，这是我的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 中看到正确的数据，这意味着将这些 props 传递给 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% 确定)。我给子路由做了更全面的props复制

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

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

的组件

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