react+antd从头搭建管理台(四)集成Redux实现跨组件传参

需求背景：

消息列表里面的消息点击全部已读，则用户首页右上角的红点消失

1、安装插件

npm i redux react-redux redux-thunk

2、在src下创建store.js

import { createStore } from "redux";

function notices(state={isAllRead: false,count:8},action){
    switch (action.type) {
        case 'READ_ALL':
            
            return {...state,isAllRead:true};
    
        default:
            break;
    }
}
const store = createStore(notices)

export default store ;

3、在src->index.js里面注入state

import {Provider} from 'react-redux'

import store from './store'

把整个框架用<Provider>包裹起来，就把reducer数据注入到整个项目里面了

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { HashRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
import { mainRoutes } from './routes';
import { Provider } from 'react-redux';
import store from './store'

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <Switch>

        {/**
         * 以admin开头的路由都用APP组件来渲染页面
         */}
        <Route path="/admin" render={routeProps => <App {...routeProps} />}></Route>
        {/**
 * 循环配置路由
 */}
        {mainRoutes.map(route => {
          return <Route key={route.path} {...route} />;
        })}
        <Redirect to="/admin" from="/"></Redirect>
        <Redirect to="/404"></Redirect>
      </Switch>

    </Router>
  </Provider>
  ,
  document.getElementById('root')
);

reportWebVitals();

4、使用1

在组件里面控制state

在notice组件里面，通过点击一个按钮派发一个action改变reducer

import {connect} from 'react-redux'

//connect把组件和dispatch及reducer数据做一个串联

在文件结尾再把state映射进来

export default connect(state=>state) (Index);

//记得把props传进来

function Index(props)

<Button onClick={()=>props.dispatch({
            type:"READ_ALL"
        })}>全部已读</Button>

使用了connect，props就有了一个新属性dispatch，dispatch派发一个action，他的type等于READ_ALL，当执行READ_ALL时候改变了isallread属性

5、使用2，如何使用改变后的state数据(红点根据是否已读来确定是否展示)

在Frame的index.js中

先引入connect

import {connect} from 'react-redux'

在文件底部把组件连进来

映射一下

const mapStateToProps = state =>state;

export default connect(mapStateToProps)(withRouter(Index));

输出这个数据，这个时候props里面就有一个isAllRead属性了

<Badge dot={!props.isAllRead}> 

源码地址

https://github.com/gogocomeon/stu-shop-manager