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中发现，单击“删除”后便调度了一个动作。任何帮助将不胜感激！！！

HomePage / 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,
    });
  }
}

主页actions.js

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

HomePage / 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

尝试分派您的动作，以便您的传奇知道它：

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

此外，您的传奇应该听取动作并更新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);
}

然后您的减速器应更新状态：

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

这应该可以处理您的情况，让我知道它是否有效欢迎使用Stack Overflow

Redux传奇-收益不退还行动

1 个答案: