在react中简单使用router和redux

react-router

1. scr里router文件夹里首先配置一级路径,path后更路径，component需要连接的组件，exact精确匹配路径，在把这个组件暴露出去。

import React from "react";
//引入路由文件
import { HashRouter as Router, Route } from "react-router-dom"

import Info from "../views/info.js";
import Reg from "../views/reg";
import Login from "../views/login";

function AppRoutet() {
    return (
        <Router>
            <div>
                <Route path="/" exact component={Login} />
                 {/* 携带的参数在username里 */}
                <Route path="/login/:username" exact component={Login} />
                <Route path="/reg" component={Reg} />
                <Route path="/Info" component={Info} />
            </div>
        </Router>
    );
}
export default AppRoutet;

2.配置二级路径，path后更全部路径，component需要连接的组件，这个含有二级路径的组件暴露出去。

import React from "react";
import { Route } from "react-router-dom";
import Counter from "../components/conter/conter.js"
import TodoList from "../components/toodolist(2)/todoList";
import StdentsList from "../components/students/studentList";
import Addstudent from "../components/students/addstudent"

export default function InfoRouter() {
    return (
        <>
            <Route path="/info/counter" component={Counter} />
            <Route path="/info/todoList" component={TodoList} />
            <Route path="/info/studentList" component={StdentsList} />
            <Route path="/info/addStudent" component={Addstudent} />
        </>
    );
}

3.最外层的App.js里引入我们暴漏的路由组件AppRouter

import React from 'react';
import { Provider } from "react-redux";
import { store } from "./store/index";
import AppRouter from "./router/appRouter";

class App extends React.Component {
    render() {
        return (
               <AppRouter />
        );
    }
}

export default App;

4.最外层的组件,一级路径下的，这里就是简单的登陆，可以通过router提供的方法来该表路径this.props.history.push("/reg"),通过defaultValue={this.props.match.params.username}接收到上一个页面传过来的数据，传数据通过 this.props.history.push("/login/123")，123代表的就是传过去的数据。

import React from "react";
export default class extends React.Component {
    render() {
        return (
            <div>
                <h1>登录</h1>
                <label htmlFor="">账户：</label>
                <input type="text" defaultValue={this.props.match.params.username} />
                <br />
                <label htmlFor="">密码：</label>
                <input type="text" /><br />
                <button onClick={() => {
                    this.props.history.push("/info");
                }}>登录</button>
                <button onClick={() => {
                    this.props.history.push("/reg");
                }}>注册</button>
            </div>
        );
    }
}

5.来到含有二级路径的组件里,通过Link组件改变路径，还需要InfoRouter，已经配置过的组件

import React from "react";
import { Link } from "react-router-dom";
import InfoRouter from "../router/infoRouter";

export default class extends React.Component {
    render() {
        return (
            <div style={{ "display": "flex" }}>
                <ul>
                    <li><Link to="/info/counter">计数器</Link></li>
                    <li><Link to="/info/todoList">待办事项</Link></li>
                </ul>
                {/* 需要加载的组件 */}
                <InfoRouter />
            </div>
        );
    }
}

redux

1.最外层的App.js

import { Provider } from "react-redux";//引入状态
import { store } from "./store/index";//引入数据仓库

import AppRouter from "./router/appRouter";//路由文件

class App extends React.Component {
    render() {
        return (
            // 全局共享store
            <Provider store={store}>
                <AppRouter />
            </Provider>
        );
    }
}

export default App;

3.store文件夹里

1. index.js

   import { createStore, combineReducers, applyMiddleware } from "redux"
   import logger from "redux-logger"
   
   
   import { count } from "./count/reducers";
   import { todolist, addIndex, filter } from "./todolist/reducers";
   import { studentInfo, updateStudent } from "./student/reducers"
   
   
   import thunk from "redux-thunk";
   
   // 	createStore 创建一个数据状态仓库
   // 	combineReducers 合并多个状态
   // 	applyMiddleware 打印日志
   
   export const store = createStore(//创建一个状态仓库
       combineReducers({
       	//把这些状态给全局，如果有多个就全部写在这里
           count, 
        	//todolist, addIndex, filter, studentInfo, updateStudent
       }),
       applyMiddleware(logger, thunk)//状态监听，就不用人为查看store.getState()
       // thunk 可以让action函数里操作多个方法
   );
   // console.log(store.getState());   
   
   

2.actions_type.js

// 行为类型,通常用大写表示
export const INCREMENT="INCREMENT";
export const DECREMENT="DECREMENT";
export const SET_COUNT = "SET_COUNT";

3.actions.js

import { INCREMENT, DECREMENT, SET_COUNT } from "./action_type";
import { createAction, createActions } from "redux-actions";


//创建action函数
export const increment = createAction(INCREMENT);//触发哪种行为
export const decrement = createAction(DECREMENT);
export const setCount = createAction(SET_COUNT);

4.reducers.js

import { INCREMENT, DECREMENT, SET_COUNT } from "./action_type";

import { handleAction, handleActions } from "redux-actions"

const count = 0;

export const count = handleActions({
    [INCREMENT]: (state, action) => state + 1,//count + 1 
    [DECREMENT]: state => state - 1,
    // 携带参数，第一个state 第二个固定payload
    [SET_COUNT]: (state, { payload }) => payload
}, count);
//通过handleActions创建reducers，第一个参数处理对象，第二个参数(count)默认数据

5.组件中使用rudex

import { connect } from "react-redux";//引入全局状态函数
class Counter extends React.Component {
    //...
    
}

const mapstateToProps = state => ({count:state.count});//返回的state
const mapDispatchToProps = dispatch => ({
    increment: () => dispatch(increment()),
    decrement: () => dispatch(decrement()),
    setCount: count => dispatch(setCount(count))
});


//连接上全局的状态，返回需要的state和方法
export default connect(mapstateToProps, mapDispatchToProps)(Counter);