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

怎么使用就不用我说了吧 

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐