redux 管理多个仓库

你的名字 2021-07-24 18:15 381阅读 0赞

1、reducers.js中引入
    	import {combineReducers} from 'redux'
    	
    2、集中暴露reducer
    
    	export default combineReducers({
        	reducer1,
        	reducer2,...
    	})
    	此时getState()获得的是包含reuders内的所有reducer
    	
    3、store.js中统一管理reducer
    
    	import  reducers from './reducers'
    	const store=createStore(reducers,composeWithDevTools(applyMiddleware(thunk)))
    
    4、修改管理数据的获取方式
    
    	export default connect(
    	  state=>({ xx:state.对应的reducer名 }),
    	  {需要的actions名称}  所有的reducer都会收到该action,所以不用额外区分
    	)(App);

代码示例:  
reducers.js

import { ADD,DEL} from './action-type'
    import { combineReducers} from 'redux'
    
    function comments(state=[],action)
    { 
        console.log('comments()',state,action);
        switch(action.type)
        { 
            case ADD:
                return [action.data,...state];
            case DEL:
            return state.filter((item,index)=>{ 
                return index!=action.data
            })
            case 'receive':
                return action.data
            default: //初始状态
                return state
        }
    }
    
    
    export default combineReducers({ 
        comments
    })

store.js

import { createStore,applyMiddleware} from 'redux';
    import  reducers from './reducers'
    import thunk from 'redux-thunk'
    import { composeWithDevTools} from 'redux-devtools-extension'
    
    
    const store=createStore(reducers,composeWithDevTools(applyMiddleware(thunk)))//第二个参数指定应用上的中间件
    console.log(store);
    
    export default store;

App.js:

import React from 'react';
    import './App.css';
    import { addComment,DelComment,get}  from './redux/actions'
    import PropTypes from 'prop-types'
    import { connect} from 'react-redux'
    import ComL from './components/comment_list/commentList'
    import ComA from './components/comment_add/commentAdd'
    
    class App extends React.Component{ 
    
      static propTypes={ 
        comments:PropTypes.array.isRequired,
        addComment:PropTypes.func.isRequired,
        DelComment:PropTypes.func.isRequired
      }
    
      componentDidMount()
      { 
        this.props.get();
      }
    
      render () { 
        const { comments,addComment,DelComment} =this.props;
        return (
          <div>
              comment
              <div>
                <ComA addComment={ addComment}></ComA>
                <ComL comments={ comments} DelComment={ DelComment}></ComL>
              </div>
          </div>
        )
    
      }
    
    }
    
    export default connect(
      state=>({  comments:state.comments }),
      { addComment,DelComment,get}
    )(App);

index.js:

import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import * as serviceWorker from './serviceWorker';
    import { BrowserRouter} from 'react-router-dom'
    
    
    import store from './redux/store'
    import { Provider} from 'react-redux'
    
    ReactDOM.render(
      <Provider store={ store} >
          <App /> 
      </Provider>
    ,
      document.getElementById('root')
    );
    
    
    
    
    // If you want your app to work offline and load faster, you can change
    // unregister() to register() below. Note this comes with some pitfalls.
    // Learn more about service workers: https://bit.ly/CRA-PWA
    serviceWorker.unregister();