react-router
- 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文件夹里
-
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);