Redux (2) 安裝 Redux

發表於 分類於
在 create-react-app 專案中新增 redux

安裝 redux

  1. 先替專案的 App.js 複製一份副本 App1.js

  2. 安裝 redux

1
2
npm install @reduxjs/toolkit
npm install react-redux
  1. src 資料夾下建立 store.js
1
2
3
4
// store.js
import { configureStore } from "@reduxjs/toolkit";

export const store = configureStore({});
  1. 引入 store

在 index.js 內引入 store 和 Provider，Provider 包在 App 元件外層，並傳入 store props ，App 元件即可取得 store 資料。

1
2
3
4
5
6
7
8
9
10
11
import { store } from "./store";
import { Provider } from "react-redux";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);
  1. 建立 slice

在 src 料夾底下新增 slice 資料夾，並在內新增 todosSlice.js，並將 todoSlice.reducer 匯出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// src/todosSlice.js
import { createSlice } from "@reduxjs/toolkit";

export const todoSlice = createSlice({
  name: "todos",
  initialState: [
    {
      id: 1,
      text: "這是一段話(副本)",
    },
  ],
});

export default todoSlice.reducer;
  1. 引入 slice

在 store.js 內 引入 slice

1
2
3
4
5
6
7
8
import { configureStore } from "@reduxjs/toolkit";
import todoReducer from "./slice/todosSlice";

export const store = configureStore({
  reducer: {
    todos: todoReducer,
  },
});
  1. 在元件內取得 store 資料

使用 useSelector 取得 store 內 todos 的資料

1
2
3
4
5
6
7
// App.js
import { useSelector } from "react-redux";
function TodoList() {
  const todos = useSelector((state) => {
    return state.todos;
  });
}