react项目从零开始之store文件夹的配置

 每次创建store文件夹都是一个麻烦事 干脆发篇通用博客 方便以后直接复制

下包与exlist 配置可以看我其他博客 

|- store   
        |- actions         # action creator
             |- channel.js  # 创建与 频道相关的 的action
             |- newsList.js # 创建与 新闻列表的 的action
        |- reducers        # reducer
             |- channel.js  #  处理频道相关的操作 
             |- index.js    # 导入 channel.js ,newsList.js 并组合之后,导出
             |- newsList.js #  处理频道新闻列表相关的操作  
        |- actionType.js  # 统一管理所有的action类型。定义常量并导出 
        |- index.js       # 创建store,并导出

 红色的是通用的直接照抄

store/index.js

import { createStore, applyMiddleware } from 'redux' 

import { composeWithDevTools } from 'redux-devtools-extension'
import thunk from 'redux-thunk'

import reducer from './reducers'
// 中间件
const store = createStore(reducer, composeWithDevTools(applyMiddleware(thunk)))

export default store
 

store/reducers/index.js

import { combineReducers } from "redux";
export default combineReducers({
  channel,
  news
}) 

store/reducers/channel.js //switch逻辑

 export default function channel(state = [], action) {
  return state
}

store/reducers/news.js

export default function news(state = [], action) {
  return state

入口文件 index.js

import ReactDOM from 'react-dom'
import App from './App'
import './styles/index.css'
import store from './store'
import { Provider } from 'react-redux'

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

怎么使用就不用我说了吧 

上一篇:kotlin语法复习--->局部返回,inline,noinline和crossinline


下一篇:Redux 三个核心概念