// store/index.js
import { createStore } from 'redux'
// 定義在redux中的數(shù)據(jù)，可被Reac組件共享
const initState = {
    count: 1,
    msg: 'hello world'
}
// state參數(shù)，就是狀態(tài)管理數(shù)據(jù)，可以被React共享的數(shù)據(jù)
// action是一種信號(hào)，可以用來修改state的信號(hào)
// action的格式是固定的{type,payload}
function reducer(state = initState, action) {
    return state
}
const store = createStore(reducer)
export default store

// views/good/GoodList.js
export default props => {
    console.log('GoodList props', props);
    return (
        <div>
            <h1>商品列表頁</h1>
        </div>
    )
}

// 引入Provider來提供數(shù)據(jù)
import { Provider } from 'react-redux'
import store from '@/store';
import GoodList from '@/views/good/GoodList';
// store就是state
function App() {
  return (
    <Provider store={store}>
      <GoodList />
    </Provider>
  );
}
export default App;

import { connect } from 'react-redux'
// 語法：connect(mapStateToProps,mapDispatchToProps)(UI組件)
// 理解：mapStateToProps用于把store數(shù)據(jù)放在props上，mapDispatchToProps用于把修改store的方法放到props上
function mapStateToProps(state) {
    console.log('上下文中的store', state);
    // 把獲得的數(shù)據(jù)return出去，props才會(huì)接收到
    return {
        count: state.count,
        msg: state.msg
    }
}
function mapDispatchToProps(dispatch) {
    // dispatch用于派發(fā)一個(gè)信號(hào)（action），信號(hào)可以修改store
    console.log('dispatch', dispatch);
    return {
        // 需求：添加方法使count自增或自減
        add: function () {
            // 在這里通過 dispatch 向store派發(fā)一個(gè)'自增'的信號(hào)
            const action = { type: 'add', payload: 1 }
            dispatch(action)
        },
        sub: function () {
            const action = { type: 'sub', payload: 1 }
            dispatch(action)
        }
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(
    props => {
        console.log('GoodList props', props);
        return (
            <div>
                <h1>商品列表頁</h1>
                <h1>{props.count}</h1>
                <button onClick={props.add}>自增</button>
                <button onClick={props.sub}>自減</button>
            </div>
        )
    }
)

// store/index.js
import { createStore } from 'redux'
// 定義在redux中的數(shù)據(jù)，可被Reac組件共享
const initState = {
    count: 1,
    msg: 'hello world'
}
// state參數(shù)，就是狀態(tài)管理數(shù)據(jù)，可以被React共享的數(shù)據(jù)
// action是一種信號(hào)，可以用來修改state的信號(hào)
// action的格式是固定的{type,payload}
function reducer(state = initState, action) {
    console.log('信號(hào)', action);
    // 由于store是只讀的，直接修改state是不會(huì)更新視圖的
    // 所以對(duì)store進(jìn)行深復(fù)制
    let newState = JSON.parse(JSON.stringify(state))
    if (action.type === 'add') {
        newState.count += action.payload
    }
    if (action.type === 'sub') {
        newState.count -= action.payload
    }
    // console.log('newState',newState)
    return newState
}
const store = createStore(reducer)
export default store

import { useSelector, useDispatch } from "react-redux";
// 注意：Hooks只能在函數(shù)式組件中使用
// - useSelector() 用于訪問上下文中的redux數(shù)據(jù)
// - useDispatch() 得到dispatch方法，可以向redux派送action
export default () => {
    // 訪問根state中study子模塊中的count
    const count = useSelector(state => state.count)
    const dispatch = useDispatch()
    const add = (payload) => dispatch({ type: 'add', payload })
    const sub = (payload) => dispatch({ type: 'sub', payload })
    return (
        <div>
            <h1>商品列表頁</h1>
            <h1>{count}</h1>
            <button onClick={() => add(1)}>自增</button>
            <button onClick={() => sub(1)}>自減</button>
        </div>
    )
}

import { produce } from 'immer'
// 定義在redux中的數(shù)據(jù)，可被Reac組件共享
const initState = {
    count: 1,
    msg: 'hello world'
}
function reducer(state = initState, action) {
    // immer深復(fù)制
    // produce:第一個(gè)參數(shù)就是傳入舊的state，經(jīng)過內(nèi)部深復(fù)制，在第二個(gè)函數(shù)中可以拿到深復(fù)制的結(jié)果；在回調(diào)函數(shù)中對(duì)深復(fù)制的結(jié)果進(jìn)行修改（加工），最終修改的結(jié)果就是produce的返回值
    return produce(state, (newState) => {
        switch (action.type) {
            case 'add':
                newState.count += action.payload
                break
            case 'sub':
                newState.count -= action.payload
                break
            default:
        }
    })
}
export default reducer