陣營路由器連接到終極版

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所示。

基本上所有的動作和狀態都映射到道具爲您的網頁。