react基础---react全家桶03

Posted 2021-03-12 shaokevin

目录：

1. redux

　　1.1 原始，原始步骤

　　1.2 react-reducer，两种写法（导出普通写法 和 装饰器的写法）

　　1.3 存储多个reducer

2. redux中间键，redux-logger | redux-thunk

　　异步请求，调用dispatch

3. router

　　基本：BrowserRouter, Link, Route, Switch, Redirect（tab中默认页面），404

　　传参

　　路由守卫

　

 

内容：

1. redux

　　安装

　　#npm install redux --save

　　1.1 原始，原始步骤

　　　　store,createStore

　　　　reducer

　　　　getState

　　　　dispatch

　　　　subscribe

　　

 

 

 

 

 

 

 

 

 

　　1.2 react-reducer，两种写法（导出普通写法 和 装饰器的写法）

　　　　安装

　　　　#npm install react-redux --save

　　　　Provider传递redux。connect接收，connect（state，{dispatch方法}）

 

 

 

 

 

 

 

 

 

 

2. redux中间键，redux-logger | redux-thunk

　　安装 #npm install redux-thunk redux-logger --save

　　异步请求，调用dispatch

 

 

 使用：connect第二个参数中，对象的value可以是对象和函数，碰到对象直接调用dispatch，碰到是函数用thunk中间键异步请求，再dispatch

 

 

 3 存储多个reducer，combineReducers多个reducer柔和成一个

 

 

 

3. router

　　安装 #npm install --save react-router-dom

　　官网：https://reacttraining.com/react-router/

　　3.1 基本：BrowserRouter, Link, Route, Switch, Redirect（tab中默认页面），404

　　3.2 传参

　　　　history: 导航指令
　　　　match: 获取参数信息
　　　　location: 当前url信息

// 传递进来路由器对象
function Detail(props) {
  // 1.history: 导航指令
  // 2.match: 获取参数信息
  // 3.location: 当前url信息
  console.log(props);

  return (
    <div>
      {location.pathname}
      当前课程：{props.match.params.course}
      <button onClick={props.history.goBack}>后退</button>
    </div>
  );
}

View Code

 

 

　　3.3 路由守卫

//store
export const user = (
  state = { isLogin: false, loading: false, error: "" },
  action
) => {
  switch (action.type) {
    case "requestLogin":
      return { isLogin: false, loading: true, error: "" };
    case "loginSuccess":
      return { isLogin: true, loading: false, error: "" };
    case "loginFailure":
      return { isLogin: false, loading: false, error: action.message };
    default:
      return state;
  }
};
export function login() {
  return dispatch => {
    dispatch({ type: "requestLogin" });
    setTimeout(() => {
      dispatch({ type: "login" });
    }, 2000);
  };
}

View Code

// 路由守卫
// 希望用法：<PrivateRoute component={About} path="/about" ...>
const PrivateRoute = connect(state => ({ isLogin: state.user.isLogin }))(
  ({ component: Comp, isLogin, ...rest }) => {
    // 做认证
    // render:根据条件动态渲染组件
    return (
      <Route
        {...rest}
        render={props =>
          isLogin ? (
            <Comp />
          ) : (
            <Redirect
              to={{
                pathname: "/login",
                state: { redirect: props.location.pathname }
              }}
            />
          )
        }
      />
    );
  }
);

// 登录组件
const Login = connect(
  state => ({
    isLogin: state.user.isLogin,
    loading: state.user.loading,
    error: state.user.error // 登录错误信息
  }),
  { login }
)(function({ location, isLogin, login, loading, error }) {
  const redirect = location.state.redirect || "/";
  const [uname, setUname] = useState(""); // 用户名输入状态
  if (isLogin) {
    return <Redirect to={redirect} />;
  }

  return (
    <div>
      <p>用户登录</p>
      <hr />
      {/* 登录错误信息展示 */}
      {error && <p>{error}</p>}
      {/* 输入用户名 */}
      <input
        type="text"
        onChange={e => setUname(e.target.value)}
        value={uname}
      />
      <button onClick={() => login(uname)} disabled={loading}>
        {loading ? "登录中..." : "登录"}
      </button>
    </div>
  );
});

View Code