通过 redux 传递道具（或者如果可能的话更简单的方法）通过 Route 或 Link

Question

我一直在翻阅搜索结果并在谷歌上搜索，就像一个追逐琥珀婴儿摇铃的瘾君子。我没有找到任何使用 React-Router -v 4 的东西。我正在构建一个简单的（lol 理论上简单）应用程序，它使用 axios 将用户配置文件传递给 Home 组件，然后映射响应并显示一堆头像和名称。这很好用。问题是，我想单击其中一个头像，然后使用 id 参数将与该头像关联的特定数据传递到新的个人用户页面。所以点击头像打开用户配置文件。我知道在 react-router -v 4 之前，您似乎实际上可以将方法直接传递到路由中，但这对我不起作用。任何帮助都会极大地帮助我解决这个难题。

动作

import axios from 'axios'
const URI = '###'

export function fetchUsers () {
 return function (dispatch) {
  axios.get (URI)
  .then ((response) => {
    dispatch({
     type: 'FETCH_USERS_FULFILLED',
     payload: response.data.users
   })
 })
   .catch ((err) => {
     dispatch({
      type: 'FETCH_USERS_REJECTED',
      payload: err
     })
    })
   }
  }

减速器

const initialState = {
  users: [],
  fetching: false,
  fetched: false,
  error: null
}

export default function reducer (state = initialState, action) {
  switch (action.type) {
   case 'FETCH_USERS_LOADING': {
     return {
      ...state,
      fetching: true,
      fetched: false,
      users: action.payload
     }
   }
   case 'FETCH_USERS_FULFILLED': {
     return {
      ...state,
      fetching: false,
      fetched: true,
      users: action.payload
    }
  }
  case 'FETCH_USERS_REJECTED': {
    return {
     ...state,
     fetching: false,
     error: action.payload
   }
  }
}

return状态 }

商店

import { applyMiddleware, createStore, compose } from 'redux'
import { createLogger } from 'redux-logger'
import thunk from 'redux-thunk'
import reducers from '../reducers'

const middleware = applyMiddleware(thunk, createLogger())

const store = createStore(
 reducers,
 compose(middleware, window.devToolsExtension ? 
 window.devToolsExtension() : f => f)
)

export default store

首页

import React, { Component } from 'react'
import { connect } from 'react-redux'
import Profile from '../Profile'
import { fetchUsers } from '../redux/actions/userActions'

class Home extends Component {
  constructor(props) {
    super(props);
     this.state = {
     }
  }

 componentDidMount() {
   this.props.fetchUsers();
 }

 render () {
   return (
     <div className={'view-wrapper'}>
       <div className={'home-container'}>
         {this.props.users.map((user, i) =>
           <Profile {...this.props} key={i} i={i} user={user}/>
         )}
       </div>
     </div>
    )
  }
}


const mapStateToProps = (state) => {
   return {
    users:   state.user.users,
    fetched: state.user.fetched,
    error:   state.user.error
   }
};
const mapDispatchToProps = (dispatch) => {
   return {
    fetchUsers: () => dispatch(fetchUsers())
   }
};

export default connect(mapStateToProps, mapDispatchToProps)(Home);

简介

import React from 'react'
import { Link } from 'react-router-dom'

const Profile = (props) => (
  <div className='profile-container'>
    <Link to={`/profile/${props.id}`}>
     <img
       src={props.avatar}
       className={'user-avatar'}
       alt={props.name}
      />
     </Link>
   </div>
  )

  export default Profile

路线

<Switch>
  <Route exact path='/' component={Home} />
  <Route path='/profile/:id' component={Profile}/>
</Switch>

Answer 1

你已经完成了一半。您不需要将数据（道具）传递到个人用户页面，而是在路由中使用 id，以便个人用户页面知道商店中它想要的记录。在您的个人用户组件中：

const mapStateToProps = (state, props) => {
  return {
    user: state.user.users.find( (user) => (user.id === props.match.params.id) )
  };
};

然后你可以在组件中作为 prop 访问 'user'。

通过 redux 传递道具（或者如果可能的话更简单的方法）通过 Route 或 Link

Passing props via redux (or a simpler way if possible) through Route or Link

reactjs

redux

react-redux

react-router-v4