在async redux的动作调度上渲染两次

时间:2018-02-11 11:04:28

标签: reactjs redux redux-thunk redux-actions

所以我在React组件中进行异步操作链调度。 我正在使用Recompose,但同样的事情发生在常规类组件中:

import React from 'react';
import ....

const enhance = compose(
  connect(state, props => {
    return {
      store: state
    };
  }),
  withHandlers({
    doShit: props => event => {
      event.preventDefault();
      axiosGetApi(props.dispatch);
    }
  })
);

function axiosGetApi(dispatch) {
  dispatch({
    type: 'GET_DATA_API_REQ'
  });
  axios
    .get('api/getData')
    .then(response =>
      dispatch({
        type: 'GET_DATA_API_SUCCESS',
        payload: response.data
      })
    )
    .catch(error =>
      dispatch({
        type: 'GET_DATA_API_ERROR',
        payload: error.response.status
      })
    );
}

export const UniversalForm = enhance(({ dispatch, doShit }) => (
  <div>
    <button className="universalform" onClick={doShit}>Press
    </button>
    {console.log('RENDER')}
  </div>
));

问题是这样的 - 首先按下按钮组件的渲染启动了六次,然后在下一次按下 - 两次。预计它只会在Redux商店的状态下呈现一次传递新值。一度。 reducer和actions是redux-actions lib中的一对一。这种行为是标准的还是我做错了什么?

这是一个日志截图: enter image description here

0 个答案:

没有答案