//  store/modules/xxx.js
 
import { createSlice } from '@reduxjs/toolkit';
 
// 創(chuàng)建一個 slice
const counterSlice = createSlice({
  name: 'counter',  // 定義 slice 的名稱
  initialState: {   // 初始化狀態(tài)
    count: 0,       // 需要被全局維護的數(shù)據(jù)
  },
  reducers: {       // 定義修改狀態(tài)的方法
    increment(state) {
      state.count += 1;  // 增加計數(shù)
    },
    decrement(state) {
      state.count -= 1;  // 減少計數(shù)
    },
    reset(state) {
      state.count = 0;    // 重置計數(shù)
    },
  },
});
 
// 導出 action 對象
export const { increment, decrement, reset } = counterSlice.actions;
 
// 導出 reducer 函數(shù)
export const counterReducer = counterSlice.reducer;

// store/index.js
 
import { configureStore } from '@reduxjs/toolkit';
import { counterReducer } from './counterSlice';
 
// 創(chuàng)建根 store
const store = configureStore({
  reducer: {
    counter: counterReducer,  // 將源 reducer 組合到根 store 中
  },
});
 
export default store;

// index.js
 
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';
 
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

// App.js
 
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, reset } from './counterSlice';
 
const Counter = () => {
  const count = useSelector(state => state.counter.count);  // 獲取狀態(tài)
  const dispatch = useDispatch();  // 獲取 dispatch 函數(shù)
 
  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(reset())}>Reset</button>
    </div>
  );
};
 
export default Counter;

    addToNum(state, action) {
        state.count = action.payload
    }

dispatch(addToNum(20))

// channelStore.js (源)
 
// 解構出action對象
const {setChannel} = channelStore.actions
 
// 封裝函數(shù)
const fetchChannelList = ()=>{
    return async(dispatch) =>{
        const res = await.get(url) // url是請求后端的地址
        // setChannel是源store在reducer中定義的action對象
        dispatch(setChannel(res.data.channels))
    }
}

// channelStore.js (源)
 
reducers:{
        setChannels(state,action){
        state.channelList = action.payload
    }
}

// App.js
 
const dispatch = useDispatch()
useEffect(()=>{
    dispatch(fetchChannelList())
},[dispatch]