上篇說明了該怎麼配置store

套用至組件Provide

首先要先回去index.js(主要的那個js)進行store配置
主要就是import兩個東西

import { Provider } from 'react-redux'
import store from './store'

用法

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>
);

這將使你的store可套用至在Provide下的所有react組件

使用useSelector,useDispatch

useSelector,useDispatch是你用redux的功能時需要使用的

useSelector：用於從Redux store中選擇狀態值，在組件中使用這些狀態值。
useDispatch：用於分派action，觸發Redux中的狀態變化。

使用(以下為app.jsx的操作)

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './store/modules/counterSlice';

const Counter = () => {
  const count = useSelector((state) => state.counter.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment(+)</button>
      <button onClick={() => dispatch(decrement())}>Decrement(-)</button>
    </div>
  );
};

export default Counter;

而count是不能亂換得，當時你在counter取甚麼就用甚麼，我自己個人建議，避免常用變數撞到，且可明確知道是redux出來的可以取成counter_count之類的會比較好辨識

今天先這樣吧

最後總結一下吧
本次練習的配置路徑為

src
 |--store
 |    |
 |    |--index.js(彙整用)
 |    |--modules 
 |         |
 |         |--counterSlice.js
 |
 |--index.jsx(總渲染檔)
 |--App.jsx

(就是這個被自己寫到亂，應該把外面的index.jsx命名成main會好點，完美的命名爛導致一堆問題)
首先在counterSlice.js寫功能
index.js彙整所有功能
再用Provide配置到所有react組件中
然後我們用將功能用至App組件並用useSelector, useDispatch來順利運作

這樣算是store預先寫好功能，單純跟他去要功能，下次來看看怎麼讓a組件影響到b組件吧