import React from 'react';
import ReactDOM from 'react-dom';
import Route from './router'
import { Provider } from 'react-redux'
import {store} from './store'
//数据持久化 在index.js里面放入的
import { persistStore } from 'redux-persist'
import { PersistGate } from 'redux-persist/lib/integration/react'

ReactDOM.render(
//store redux的放入
  <Provider store={store}>
  //这里是持久化的标签
    <PersistGate loading={null} persistor={persistStore(store)}>
    //自己配置的路由
      <Route />
    </PersistGate>
  </Provider>
  ,document.getElementById('root')
);

//自己的store中放入的
import { createStore , compose , combineReducers , applyMiddleware} from 'redux'
import promise from 'redux-promise';
import thunk from 'redux-thunk';

import { persistReducer } from 'redux-persist' // 合并 reduce
import storage from 'redux-persist/lib/storage' // 创建 store
// 多层对象 做数据持久化
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2'

import biaoDan from './reducers/biaodan'
import list from './reducers/list'

// 我要对哪些 reduce 的 state 做数据持久化
const rootPersistConfig = {
  key: 'root',//属性值可以自己写名字
  storage,
  stateReconciler: autoMergeLevel2,
  // 白名单 [reducer 目录内的 reduce 文件名]  给谁做持久化
  whitelist: ['list'],  
}
//配合浏览器的redux显示查看
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

// 抽离出一个需要持久化的公共 reduce
const myPersistReducer = persistReducer(
  rootPersistConfig,
  combineReducers({
    biaoDan,
    list,
  }
))

//抛出一个store
const store = createStore(
  myPersistReducer
  ,composeEnhancers(applyMiddleware(promise,thunk))
)

export {store}