Reactjs 使用 redux ("function name") 不是一个函数

Question

我收到错误 vesselList is not a function in my homescreen that's using a redux slice 错误出在 useEffect 钩子的 dispatch 中的 vesselList() 中，如果有更好的方法我可以修改此代码，请提出建议。

切片：容器切片：

export const vesselSlice = createSlice({
  name: "vesselList",
  initialState: {
    vessels: [],
  },
  reducers: {
    vesselList: (state, action) => {
      state.value = action.payload;
    },
  },
});

export const {
  vesselList,
} =
  (keyword = "") =>
  async (dispatch) => {
    try {
      dispatch({ type: VESSEL_LIST_REQUEST });
      const { data } = await axios.get(
        "http://127.0.0.1:8000/api/vessels/info"
      );

      dispatch({
        type: VESSEL_LIST_SUCCESS,
        payload: data,
      });
    } catch (error) {
      dispatch({
        type: VESSEL_LIST_FAIL,
        payload:
          error.response && error.response.data.detail
            ? error.response.data.detail
            : error.message,
      });
    }
  };
export default vesselSlice.reducer;

HomeScreen.js :

function HomeScreen() {
  const dispatch = useDispatch();
  const Listvessel = useSelector((state) => state.vesselList);
  const { error, loading, vessels } = Listvessel;
  useEffect(() => {
    dispatch(vesselList());
  }, [dispatch]);
  return (
    <div>
      Fleet vessels :
      <div className="fleet-vessels-info">
        {vessels.map((vessel) => (
          <VesselCard vessel={vessel} />
        ))}
      </div>
    </div>
  );
}

export default HomeScreen;

Answer 1

因为 vesselList 还没有导出，为什么你不使用 createAsyncThunk 来获取 url 并发送到 redux store？

Reactjs 使用 redux ("function name") 不是一个函数

Reactjs using redux ("function name") is not a function

reactjs

redux

react-redux

redux-toolkit