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')
)

怎么使用就不用我说了吧 

相关文章

一、前言 在组件方面react和Vue一样的,核心思想玩的就是组件...
前言: 前段时间学习完react后,刚好就接到公司一个react项目...
前言: 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...