Redux Toolkit中action.payload无法同步至state的问题排查

我是React和Redux Toolkit新手，尝试从本地API获取posts数据。Redux DevTools中能看到action.payload，但无法将其同步到state中。

postSlice.js 代码 #

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";


export const getPosts = createAsyncThunk("posts", async () => {
  try {
    const res = await axios({
      method: "get",
      url: `${process.env.REACT_APP_API_URL}api/post`,
      withCredentials: true,
    });
    console.log(res.data);
    return res.data;
  } catch (err) {
    return err.res.data;
  }
});
const postsSlice = createSlice({
  name: "posts",
  initialState: {
   posts: [],
   loading: false,
   error:"",
  },
  extrareducers: {
   [getPosts.pending]: (state, action) => {
     state.loading = true;
   },
   [getPosts.fulfilled]: (state, action) => {
     console.log(action.payload);
     state.loading = false;
     state.posts = action.payload;
   },
   [getPosts.rejected]: (state, action) => {
     state.loading = false;
     state.posts = action.payload.message;
   },
 },
 });


export default postsSlice.reducer;

React组件中dispatch代码 #

import { useDispatch } from "react-redux";
import { getPosts } from "../redux/features/postSlice";
const Thread = () => {
const [loadPost, setLoadPost] = useState(true);
const dispatch= useDispatch();
  
  useEffect(() => {
    if (loadPost ) {
      dispatch(getPosts());
      setLoadPost(false)
    }
  }, [loadPost, dispatch]);

  return <div>Fil d'actualités</div>;
};

export default Thread;

Redux DevTools状态展示 #

posts(pin):[]
loading(pin): false
error(pin): ""

Action中的payload展示 #

payload (pin): [{...}{...}{...}]

同时，pending、fulfilled和rejected状态下loading值始终不变，fulfilled中的console.log也未执行，action似乎完全未影响state。我另有一个异步reducer可正常工作，希望得到帮助。

编辑：我发现了问题！是声明extraReducers时拼写错误，写成了extrareducers（小写r），这种错误实在让人懊恼。

内容的提问来源于stack exchange，提问作者Nevid Rahal