react-router+redux实际操作

红太狼 2022-12-17 07:14 202阅读 0赞

react-router学习网站：[https://reactrouter.com/web/example/custom-link][https_reactrouter.com_web_example_custom-link]

App.js

import React, { Component } from "react";
    import StepOne from "./stepOne";
    import StepTwo from "./stepTwo";
    import StepThree from "./stepThree";
    import { Menu } from "antd";
    import { connect } from "react-redux";
    import { Route, Link} from "react-router-dom";
    import "antd/dist/antd.css";
    class App extends Component {
      constructor(props){
        super(props);
        this.state={
          current: 'StepOne',
        }
        this.handleClick = this.handleClick.bind(this);
      }
      handleClick(e) {
        this.setState({
          current: e.key,
        });
      }
      render() {
        return (
          <div style={
       { paddingTop: 70 }}>
            <Menu onClick={this.handleClick} mode="horizontal" selectedKeys={[this.state.current]} >
              <Menu.Item key="StepOne">
                <Link to="/">步骤一</Link>
              </Menu.Item>
              <Menu.Item key="StepTwo">
                <Link to="/StepTwo">步骤二</Link>
              </Menu.Item>
              <Menu.Item key="StepThree">
                <Link to="/StepThree">步骤三</Link>
              </Menu.Item>
            </Menu>
            <Route exact path="/">
              <StepOne />
            </Route>
            <Route path="/StepTwo">
              <StepTwo />
            </Route>
            <Route path="/StepThree">
              <StepThree />
            </Route>
          </div>
        );
      }
    }
    const mapStateToProp = state => ({
    });
    const mapDispatchToProp = dispatch => ({
    });
    export default connect(
      mapStateToProp,
      mapDispatchToProp
    )(App);

新建action文件，文件下新建js文件

import * as TYPES from "../types";
    export function getStep(value) {
        return dispatch => {
            console.log('value', value)
            dispatch(changeStep(value));
        };
    }
    export function changeStep(stepList) {
        return {
            type: TYPES.STEP_LIST,
            text: stepList
        };
    }

新建reducers文件，文件下新建两个js

reducers.js

import stepReducer from "./stepReducer";
    import {combineReducers} from 'redux';
    export default combineReducers({
        stepListStore: stepReducer
    });

stepReducer.js

import * as TYPES from "../types";
    const initialState = {
        stepList: ""
    };
    
    export default function allList(state = initialState, action) {
      switch (action.type) {
        case TYPES.STEP_LIST:
          return {
            ...state,
            stepList: action.text
          };
        default:
          return state;
      }
    }

新建types文件，文件下新建js文件

export const STEP_LIST = "step_list";

页面文件stepOne.js，另外两个页面省略代码

import React, { Component } from "react";
    import { Button } from "antd";
    import { connect } from "react-redux";
    import { getStep } from "./action"
    // import { useHistory } from "react-router-dom";
    // let history = useHistory();
    class StepOne extends Component {
        constructor(props) {
            super(props);
            this.state = {
                stepList: "",
    }
            this.addStep = this.addStep.bind(this);
        }
        addStep(){
            const { getStep } = this.props;
            getStep("getStep");
            // history.pushState("/StepTwo")
           
        }
        render() {
            console.log("stepList",this.props.stepList)
            return (
                <div style={
       { paddingTop: 70 }}>
                    Step One
                    <Button onClick={this.addStep}>跳转到步骤二</Button>
                </div>
            );
        }
    }
    const mapStateToProp = state => ({
        stepList: state.stepListStore.stepList
    });
    const mapDispatchToProp = dispatch => ({
        getStep: (value) => dispatch(getStep(value))
    });
    export default connect(
        mapStateToProp,
        mapDispatchToProp
    )(StepOne);

初始index文件的配置

import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import * as serviceWorker from './serviceWorker';
    import { Provider } from "react-redux";
    import { createStore, applyMiddleware } from "redux";
    import { BrowserRouter as Router, } from "react-router-dom";
    import thunkMiddleware from 'redux-thunk'
    import { createLogger } from 'redux-logger'
    import reducers from "./reducers/reducers";
    const loggerMiddleware = createLogger()
    const store = createStore(
      reducers,
      applyMiddleware(
        thunkMiddleware, // 允许我们 dispatch() 函数
        loggerMiddleware // 一个很便捷的 middleware，用来打印 action 日志
      )
    )
    ReactDOM.render(
      <Provider store={store}>
        <Router>
          <div id="root-div">
            <App />
          </div>
        </Router>
      </Provider>,
      document.getElementById('root')
    );
    serviceWorker.unregister();

[https_reactrouter.com_web_example_custom-link]: https://reactrouter.com/web/example/custom-link