react中使用redux

// 首先引入 redux 以及 react-redux
yarn add redux 
yarn add react-redux


//第二步 在项目的根路径下面创建一个reducer文件夹里面放一个index文件
// 默认值
const defaultvalue = {
    value: {
        name: 'xuhao',
        id: 1
    }
}
// 处理发送过来的 action
export const reducer = (state = defaultvalue, action) => {
    switch(action.type){
        case 'test_Object':
            return Object.assign({}, state, action);
        default: 
            return state
    }
}


//第三步新建一个store文件夹里面放一个index
import { createStore } from 'redux'
import { reducer } from '../reducer'
export const store = createStore(reducer)

// 第四步在所有页面的根组件中使用Provider高阶组件
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import { HashRouter, Route, Switch,Redirect } from 'react-router-dom';
import { minRouter } from './routers';
import Page2 from './pages/page2/page2';
import { Provider } from 'react-redux';
import { store } from './store';
ReactDOM.render(
// 在Provider中传入你的store
  <Provider store={store}>
    <HashRouter>
      <Switch>
        <Route path="/page2" render={(data) => <Page2 {...data}/>}/>
        {minRouter.map(item => {
          return (<Route key={item.path} {...item}/>)
        })}
        <Redirect to="/errpage"/>
      </Switch>
    </HashRouter>
  </Provider>
  ,
  document.getElementById('root')
);

// 在子组件中使用connect(接受的处理函数，发送的处理函数)(组件)
import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
import { sfRouter } from '../../routers';
import Child1 from './child/child1';
import { connect } from 'react-redux'
class Page2 extends Component {
    handleClick = () => {
        console.log(this.props)
        // 这里能调用到mapStatetopProps 中返回的函数
        this.props.sendActions()
    }
    render() {
        return (
            <h1>
                主页面2
                {this.props.value.name}
                <button onClick={this.handleClick}>测试</button>
                <Switch>
                    {sfRouter.map(item => {
                        return <Route key={item.path} path={item.path} exact={item.exact} render={(data) => <item.component {...data}/>}/>
                    })}
                    <Route path="/page2/child1" component={Child1}/>
                </Switch>
            </h1>
        );
    }
}
// 将sendActions挂载到props中方便发送action
const mapStatetopProps = (dispatch) => {
    return {
        sendActions: () => {
            dispatch({
                type: 'test_Object',
                value: {
                    name: 'guan1',
                    id: 1
                }
            })
        }
    }
}
// 将state返回的数据挂载到props中方便页面使用
const accept = (state) => {
    return state
}
export default connect(accept, mapStatetopProps)(Page2);