redux-thunk學習筆記

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider } from 'react-redux'
import { createStore ,applyMiddleware} from 'redux'
import logger from 'redux-logger'
//logger記錄使用者記錄檔！！！！！！！！！！！！！
import thunk from 'redux-thunk'
//thunk處理異步類似vuex中的action！！！！！
// import xxx from './reducers/index'
import RooterReduce from './reducers/merge'
///
//action.js
import {JIA, JIAN} from '../constant/const'
// export const add = () =>{
//     return {
//         type:JIA
//     }
// }
//thunk 模拟異步請求，可以調用多個如：dispatchEvent（dispatchEvent）
//！！！就像vuex裡的store.dispatch({...})
export function add (){
    return dispatchEvent =>{
        setTimeout(()=>{
            dispatchEvent({
                type:JIA
            })
        },1000)
    }
}

export const minux = (dispatchEvent) => {
    return {
        type:JIAN
    }
}
///

const store = createStore(RooterReduce,applyMiddleware(logger,thunk))
// store.subscribe(() => console.log(store.getState()))

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





// const rendeFn = () => {
//     ReactDOM.render(<App 
//         onAdd={()=>{store.dispatch({
//             type:'JIA'
//         })}}
//         onMuni={()=>{store.dispatch({
//             type:'JIAN',
//             num:5
//         })}}
//         value={store.getState()}
//         />, document.getElementById('root'));
// }
// rendeFn()

// store.subscribe(rendeFn)