阵营路由器连接到终极版

Question

我有使用react-router一个基本的网站设置，我的索引页：

render(
    <Provider store={store}> 
     <Router history={browserHistory} routes={routes} /> 
    </Provider>, 
    document.getElementById('root') 
); 

减速机：

import { ADD_DETAILS } from '../constants/ActionTypes'; 

const initialState = [ 
    { 
    id: 0, 
    language: '', 
    session: '', 
    values: '', 
    accessCode: '', 
    age: 0, 
    gender: '', 
    ethnicity: '', 
    drinkOften: '', 
    drinkConcern: '', 
    }, 
]; 

export default function UserDetails(state = initialState, action) { 
    switch (action.type) { 
    case ADD_DETAILS: 

    // update user details 

    default: 
     return state; 
    } 
} 

指数减速器：

import { combineReducers } from 'redux'; 
import UserDetails from './UserDetails'; 

const rootReducer = combineReducers({ 
    UserDetails, 
}); 

export default rootReducer; 

典型网页看起来是这样的：

class Screen1 extends Component { 
    constructor() { 
    super(); 
    this.submitForm = this.submitForm.bind(this); 
    } 

    submitForm(e) { 
    const language = e.target.value; 

    //dispatch action here - this.props.UserDetails 
    } 

    render() { 
    return (
     <div> 
     <label htmlFor="title">Please select your language</label> 

     <button 
      className="btn btn-primary" 
      value="en" 
      onClick={this.submitForm}> 
      English 
     </button> 
     <button 
      className="btn btn-primary" 
      value="po" 
      onClick={this.submitForm}> 
      Polszczyzna 
     </button> 
     </div> 
    ); 
    } 
} 

export default connect()(Screen1); 

我已经加入：

function mapStateToProps(state, ownProps) { 
    return { 
    UserDetails: state.UserDetails, 
    }; 
} 

export default connect(mapStateToProps)(Screen1); 

在我的行为我有这个addDetails动作，我怎么能派遣它从我的页面：

import * as types from '../constants/ActionTypes'; 

export const addDetails = (id, text, time) => ({ 
    type: types.ADD_DETAILS, 
    text, 
    id, 
    time, 
}); 

我怎样才能派遣行动在我的网页？我看不到道具中的派送。

Answer 1

首先我建议使用redux-little-routerhttps://github.com/FormidableLabs/redux-little-router它的访问路线真正体面的解决办法。

• 使用mapStateToProps将您的数据映射到组件的属性，以便根据需要随时准备和提供。但请注意，您每次换店时都不需要重新组件零件。这就是为什么你应该使用reselect以及https://github.com/reactjs/reselect
• 使用mapDispatchToProps建立一个处理程序调度工作，这里是应采取行动

你应该有这样的事情：

import { addDetails } from '../constants/Actions'; 

export default connect(

    // mapStateToProps 
    (state, ownProps) => { 
     return { 
      userId: ownProps.user.id 
     } 
    }, 

    // mapDispatchToProps 
    (dispatch, ownProps) => { 
     return { 
      onUserActionButtonClick: (id, text, time) => dispatch(addDetails(id, text, time)) 
     } 
    } 

)(Screen1); 

不只是绑定你的组件的功能

class Screen1 extends Component { 
    constructor() { 
    super(); 
    this.submitForm = this.submitForm.bind(this); 
    } 

    submitForm(e) { 
    const language = e.target.value; 

    const { userId, onUserActionButtonClick } = this.props 

    onUserActionButtonClick(userId, language, new Date); 

    //dispatch action here - this.props.UserDetails 
    } 



    render() { 
    return (
     <div> 
     <label htmlFor="title">Please select your language</label> 

     <button 
      className="btn btn-primary" 
      value="en" 
      onClick={this.submitForm}> 
      English 
     </button> 
     <button 
      className="btn btn-primary" 
      value="po" 
      onClick={this.submitForm}> 
      Polszczyzna 
     </button> 
     </div> 
    ); 
    } 
} 

Answer 2

可以使用反应 - 终极版mapsDispatchToProps。 就像是这里mapDispatchToProps所示。

基本上所有的动作和状态都映射到道具为您的网页。