通过路由或链接传递道具通过REDX（或更简单的方式）通过路线或链接

Question

我一直在翻阅搜索结果和谷歌搜索追逐琥珀婴儿拨浪鼓。我找不到任何使用React-Router -v 4.我正在构建一个简单的（理论上讲是简单的）应用程序，它使用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 
    } 
    } 
} 

返回状态 }

商店

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)) 
    }; 
}; 

然后，您可以在组件中访问'user'作为道具。