Question

我正在使用redux动作模式（REQUEST，SUCCESS，FAILURE）以及redux saga。我像这样做了一个观察者和工人的传奇：

import axios from 'axios';
import { put, call, takeEvery } from 'redux-saga/effects';
import * as actionTypes from 'constants/actionTypes';
import * as actions from 'actions/candidates';
const { REQUEST } = actionTypes;

// each entity defines 3 creators { request, success, failure }
const { fetchCandidatesActionCreators, addCandidateActionCreators } = actions;

const getList = () => axios.get('/api/v1/candidate/');

// Watcher saga that spawns new tasks
function* watchRequestCandidates() {
  yield takeEvery(actionTypes.CANDIDATES[REQUEST], fetchCandidatesAsync);
}

// Worker saga that performs the task
function* fetchCandidatesAsync() {
  try {
    const { data } = yield call(getList);
    yield put(fetchCandidatesActionCreators.success(data.data));
  } catch (error) {
    yield put(fetchCandidatesActionCreators.failure(error));
  }
}


const postCandidate = params => axios.post('/api/v1/candidate/', params).then(response => response.data).catch(error => { throw error.response || error.request || error; });

// Watcher saga that spawns new tasks
function* watchAddCandidate() {
  yield takeEvery(actionTypes.ADD_CANDIDATE[REQUEST], AddCandidateAsync);
}

// Worker saga that performs the task
function* AddCandidateAsync({ payload }) {
  try {
    const result = yield call(postCandidate, payload);
    yield put(addCandidateActionCreators.success(result.data));
  } catch (error) {
    yield put(addCandidateActionCreators.failure(error));
  }
}

export default {
  watchRequestCandidates,
  fetchCandidatesAsync,
  watchAddCandidate,
  AddCandidateAsync,
};

我的reducer有两个标志：isLoading和成功。这两个标志都根据请求，成功和失败操作而改变。

问题是当成功动作置于redux状态时，我希望我的组件呈现不同的内容。我想在每次_success操作发生时向组件发出警告！

我第一次使用的标志很好，但是我希望它们在安装组件或用户单击按钮时重置，因为我的组件是表单，并且我希望用户在表单上张贴很多表单服务器。

最佳做法是什么？

我唯一想到的就是创建一个_RESET动作，当用户单击该按钮以填写其他表单以及安装组件时会调用_RESET动作，但是我不知道这是否是一个好习惯。

Answer 1

您需要分配一个高阶组件（也称为容器），以将商店与您的组件连接起来。当使用选择器时，如果状态的该部分发生更改并将该状态的那部分作为对组件的支持，则组件将自动更新。（如dspatchstateToProps中所定义）

在下面，我有一个Exmaple组件，该组件从Redux状态中选择状态，并将其作为Promaple的道具传递。例如，我可以根据商店中显示的状态用文本呈现不同的div元素。

祝你好运！

 import { connect } from 'react-redux'

    const ExampleComponent = ({ status }) => {
      return (
    <div>
      {status === 'SUCCESS' ? (<div>yaay</div>) : (<div>oh no...</div>)}
    </div>
  )
}

const mapStateToProps = state => {
  return {
    status: state.status
  }
}

const mapDispatchToProps = dispatch => {
  return {}
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ExampleComponent)

redux saga成功执行动作时如何警告组件？

1 个答案: