Redux saga - yield 不返回动作

Question

我在 github 上的 react-boilerplate 开源项目中使用 redux saga，并且我正在使用 redux saga 删除用户。该代码在 create-react-app 上完美运行，但不适用于 react-boilerplate (https://github.com/yarusophialiu/react-boilerplate/blob/master/app/containers/HomePage/saga.js)。问题是 yield take(...) 返回 null。我 console.log action.js 并发现当我单击删除时调度了一个动作。任何帮助将不胜感激！！！

主页/saga.js

export function* deleteUser({ userId }) {
  try {
    yield call(api.deleteUser, userId);
    // yield call(getUsers);
  } catch (e) {
    console.log(e);
  }
}

export function* watchDeleteUserRequest() {
  // yield takeLatest(DELETE_USER_REQUEST, getRepos);
  while (true) {
    const action = yield take(DELETE_USER_REQUEST);
    yield call(deleteUser, {
      userId: action.payload.userId,
    });
  }
}

主页操作.js

export const deleteUserRequest = userId => ({
  type: DELETE_USER_REQUEST,
  payload: {
    userId,
  },
});

主页/index.js

...
import { createStructuredSelector } from 'reselect';

import { useInjectReducer } from 'utils/injectReducer';
import { useInjectSaga } from 'utils/injectSaga';
import { changeUsername, deleteUserRequest } from './actions';
import reducer from './reducer';
import saga from './saga';
import UserList from '../UsersPage/UserList';

const key = 'home';

export function HomePage({
  username,
  loading,
  error,
  repos,
  onSubmitForm,
  onChangeUsername,
}) {
  useInjectReducer({ key, reducer });
  console.log('home', saga);
  useInjectSaga({ key, saga });

  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios
      .get('https://rem-rest-api.herokuapp.com/api/users', {
        params: {
          limit: 1000,
        },
      })
      .then(({ data }) => {
        setUsers(data.data);
      });
  }, []);

  const handleDeleteUserClick = userId => {
    console.log('delete', deleteUserRequest(userId));
    deleteUserRequest(userId);
  };

  const reposListProps = {
    loading,
    error,
    repos,
  };

  return (
    <article>
      <div>
        <UserList users={users} onDeleteUser={handleDeleteUserClick} />
      </div>
    </article>
  );
}

...

Answer 1

尝试调度您的操作，以便您的 saga 知道它：

import { useDispatch } from 'react-redux';

export function HomePage({
  username,
  loading,
  error,
  repos,
  onSubmitForm,
  onChangeUsername,
}) {

  const [users, setUsers] = useState([]);
  const dispatch = useDispatch(); // use to dispatch actions

  ...

  const handleDeleteUserClick = userId => {
    dispatch(deleteUserRequest(userId)); // Here you need to use dispatch
  };

  ...

  return (
    <article>
      <div>
        <UserList users={users} onDeleteUser={handleDeleteUserClick} />
      </div>
    </article>
  );
}

另外，你的 saga 应该监听 action 并更新 reducer：

export function* deleteUser({ userId }) {
  try {
    yield call(api.deleteUser, userId);
    yield put({ type: 'DELETE_USER_SUCCESS', payload: { userId });
  } catch (e) {
    console.log(e);
  }
}

export function* watchDeleteUserRequest() {
  yield takeLatest(DELETE_USER_REQUEST, deleteUser);
}

那么你的 reducer 应该更新状态：

const initialState = {
    users: []
};

const handlers = {
    ['DELETE_USER_SUCCESS']: (state, payload) => {
        const users = [...state.users.filter(user => user.id !== payload.id);
        return { ...state, users: { ...state.pending, invite: false } };
    }
};

这应该可以处理您的情况，让我知道它是否有效 欢迎来到堆栈溢出