javascript - 如何将状态/对象传递给子路由(react-router redux)？

Question

我的“store.js”执行以下操作:

export default function configureStore(initialState = {todos: [], floatBar: {} }) {
 return finalCreateStore(rootReducer, initialState)
}

然后在我的“client.js”中，我有初始化状态，但没有定义“todos”数组，并设置路由器:

let initialState = {
  floatBar: {
    barStatus: false,
    id: 0
  }
}

let store = configureStore(initialState)

render(
  <div>
    <Provider store={store}>
      <Router history={hashHistory}>
        <Route
          path="/"
          component={App}
        >
        <Route
          component={FirstPage}
          path="firstpage"
        />
        <Route
          component={NewPage}
          path="/newpage/:id"
        />
        </Route>
      </Router>
    </Provider>
  </div>,
  document.getElementById('app')
)

然后在我的“item.js”组件中，它是“FirstPage.js”的子组件，它获取一个对象“todo”并检索“.id”，它是“todos”对象中的一个对象-数组(在 render() return{} 内)，我有以下内容:

<Link to={`/newpage/${this.props.todo.id}`}>Link1</Link>

最后，在我新链接的页面“NewPage.js”中，我希望能够在“item.js”中使用完全相同的“todo”对象，因此我可以调用“todo.id”等。我该怎么做？

谁能展示使用 redux react-router 执行此操作的正确方法？真的很感激。

**更新

**行动的最新消息

actions.js 里面有我所有的 action creators:

import * as actions from '../redux/actions'

class NewPage extends Component{
  handleCommentChange(){
    this.props.actions.updateComment()
  }

  render(){
    return()
  }
}

function mapDispatchToProps(dispatch){
  return{
    actions: bindActionCreators(actions, dispatch)
  }
}

export default connect(
  mapDispatchToProps
)(NewPage);

Answer 1

您可以从 props.params.id 访问“todo id”。您也可以通过“mapStateToProps”中的“ownProps”访问NewPage的props.params

import {connect} from "react-redux";
import React, { Component } from 'react'
import { Divider } from 'material-ui'

const styles = {
  title:{
    color: 'white',
    textAlign: 'left',
    marginLeft: 30
  }
}

class NewPage extends Component{
  render(){
    return(
      <div>
        &nbsp;
        <div style={styles.title}>
          <font size="4">
            {this.props.todo.title}
          </font>
        </div>
        &nbsp;
          <Divider style={{backgroundColor:'#282828'}}/>
        &nbsp;
        <p style={{color: 'white'}}>{this.props.todo.detail}</p>
      </div>
    )
  }
}
const mapStateToProps=(state, ownProps)=>{
let todo = state.todos.filter(todo=>todo.id==ownProps.params.id);
return{
    todo:todo[0]
}};
export default connect(mapStateToProps)(NewPage);