react 001

https://github.com/daisylys/react-0807

脚手架

create-react-app reactName //react-0807
npm start

路由

yarn add react-router-dom

• react-router路由拦截官方说明
  https://juejin.im/post/5c31aede6fb9a04a0d570107

//app.js
import React from "react";
import "./App.css";
import { HashRouter, Switch, Redirect, Route, Link } from "react-router-dom";
import Home from "./views/Home";
import About from "./views/About";
import Login from "./views/Login";
const routerMap = [
  { path: "/", name: Home, component: Home },
  { path: "/login", name: Login, component: Login },
  { path: "/about", name: About, component: About, auth: true }
];
function App() {
  const token = false;
  return (
    <div className="App">
      <HashRouter>
        <nav>
          <Link to="/">home</Link>
          <Link to="/about">About</Link>
        </nav>
        <Switch>
          {/* <Route path="/" component={Home} />
          <Route path="/about" component={About} /> */}
          {routerMap.map((item, index) => {
            return (
              <Route
                key={index}
                path={item.path}
                exact
                render={v =>
                  !item.auth ? (
                    <item.component {...v} />
                  ) : token ? (
                    <item.component {...v} />
                  ) : (
                    <Redirect
                      to={{
                        pathname: "/login",
                        state: { from: v.location }
                      }}
                    />
                  )
                }
              />
            );
          })}
        </Switch>
      </HashRouter>
    </div>
  );
}

export default App;

yarn add redux react-redux
yarn add redux-thunk redux-logger

redux/store

//index.js
import { createStore, applyMiddleware } from "redux";
import reducer from "../reducer/index";
import thunk from "redux-thunk";
import logger from 'redux-logger';
let store = createStore(reducer, applyMiddleware(logger,thunk));
console.log("store", store.getState());
export default store;
//initState.js
export default {
    videoHome: [],
    videoData: [],
    token: ''//登陆状态
  };
  

redux/reducer

//index.js
import { combineReducers } from "redux";
// import videoReducer from "./videoReducer";
import loginReducer from "./loginReducer";
const reducer = combineReducers({
  token: loginReducer,
//   videoData: videoReducer
});
export default reducer;

//loginReducer.js
import { LOG_IN } from "../actions/actionTypes";
import initState from "../store/initState";
 
export default (state = initState.token, action) => {
  switch (action.type) {
    case LOG_IN:
      return action.payload;
    default:
      return state;
  }
};

redux/action

//login.js
import { LOG_IN } from "./actionTypes";
export const changeActive = token => {
  return {
    type: LOG_IN,
    payload: token
  };
};

//actionTypes.js
const LOG_IN = "LOG_IN";
export { LOG_IN };

• 使用

//login.js
import React, { Component } from "react";
import { connect } from "react-redux";
import { changeActive } from "../../redux/actions/login";
class Login extends Component {
  login = () => {
    let RedirectUrl = this.props.location.state
    ? this.props.location.state.from.pathname
    : "/";
  // 修改redux中的token值
  this.props.changeActive(true);
  // this.props.login();
  console.log(RedirectUrl);
  // 登陆成功之后的跳转
  this.props.history.push(RedirectUrl);
  };
  render() {
    return (
      <div>
        Login
        <button onClick={this.login}>Login</button>
      </div>
    );
  }
}
const mapStateToProps = (state, ownProps) => {
    return {
      token: state.token
    };
  };
const mapDispatchToProps = { changeActive };
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Login);

//app.js
class App extends React.Component {
  render() {
    const { token } = this.props;
    return (
           {routerMap.map((item, index) => {
              return (
                  <Route
                    render={v =>
                     token ? ( <item.component {...v} />) :
                             ( <Redirect to={{  pathname: "/login", state: { from: v.location }  }}  />  )
            })}
const mapStateToProps = (state, ownProps) => {
  return {
    token: state.token
  };
};
export default connect(mapStateToProps)(App);

• redux数据增删

import React, { Component } from "react";
import { connect } from "react-redux";
import { addMusicList, delMusicList } from "../../redux/actions/music";
class Music extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputVal: ""
    };
  }
  componentDidMount() {}
  handleChange = e => {
    this.setState({
      inputVal: e.target.value
    });
  };
  addMusic = () => {
    const list = this.props.musicList;
    const id = list[list.length - 1].id;
    this.props.addMusicList({ id: id + 1, name: this.state.inputVal });
  };
  delMusic = id => {
    this.props.delMusicList(id);
  };
  render() {
    const { musicList } = this.props;
    return (
      <div>
        <span>music</span>
        <input type="text" onChange={this.handleChange} />
        <button onClick={this.addMusic}>add</button>
        <ul>
          {musicList &&
            musicList.map((v, k) => (
              <li key={k}>
                {v.id} {v.name}
                <button onClick={() => this.delMusic(v.id)}>delete</button>
              </li>
            ))}
        </ul>
      </div>
    );
  }
}
const mapStateToProps = state => {
  return {
    musicList: state.musicData1
  };
};
const mapDispatchToProps = { addMusicList, delMusicList };
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Music);