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

您可以使用react-redux的mapsDispatchToProps。就像它显示在这里mapDispatchToProps。

基本上所有操作和状态都映射到页面的道具中。

Answer 2

First of all I recommend to use redux-little-router https://github.com/FormidableLabs/redux-little-router it's really decent solution for accessing routes.

Use mapStateToProps to map your data into properties of component, so that would be always prepared and provided as needed. But please be aware that you would not need component to be rerendered each time you're changing store. That's why you should use reselect as well https://github.com/reactjs/reselect
Use mapDispatchToProps to build up a handlers for dispatching jobs, here is where actions should be taken

You should be having something like this:

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

Not just bind that function which your component

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

React Router连接到redux

2 个答案: