复习redux

app.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

import {connect} from 'react-redux'
import {changeUserName,changeUserStatus} from './actions'


class App extends React.Component {
  changeUserName = () => {
    //const {userName} = this.props;
    this.props.changeUserName( "Mao Zedong");
  };
  changeUserStatus = ()=>{
    
    if(this.props.status === "online"){
      this.props.changeUserStatus("offline");
    }else{
      this.props.changeUserStatus("online");
    }
    
  }
  render() {
    return (
      <div>
         
        <button onClick={this.changeUserName}>Click to change username</button>
        Hi! {this.props.userName}
        <button onClick={this.changeUserStatus}>Toogle Status</button>
        Status:{this.props.status}
      </div>
    );
    }
  }
function mapStateToProps(state) {
    const { user } = state;
    return {
      userName: user.userName,
      status: user.status
    };
}
export default connect(
    mapStateToProps,
    { changeUserName, changeUserStatus }
)(App);

actions folder
index.js

export * from "./user";

user.js

export function changeUserName( userName ) {
    return {
        type: "CHANGE_USER_NAME", //compulsory key!
        userName
    };
}

export function changeUserStatus(status){
    return{
        type:"CHANGE_USER_STATUS",
        status
    }
}

reducer folder
index.js

import { combineReducers } from "redux";
import user from "./user";

export default combineReducers({
    user
});

user.js

const initialState = {
    userName:"world!",
    status:"offline"
}
export const user = (state = initialState, action) => {
    console.log(action)
    switch (actions.type) {
        case "CHANGE_USER_NAME":
            return{
                ...state,
                userName:action.userName,
            };
        case "CHANGE_USER_STATUS":
            return{
               ...state,
               status:action.status,
            }
        default:
            return state;

    }
};
export default user;

React hooks

Fuctional component

accepts a single "props"(which stands for properties) object argument with data and returns a Reacr element

Stateful component

Motivation

• Reuse behaviors among components
• Add state control to functional components
  useState
  useEffect

React hooks

hoc

Functional Component

function Welcome(props){
  return<h1>{props.name}</h1>
}
<Welcome name="a">

Stateful component

React hooks

1.useState

import React,{useState} from 'react';

function Example(){
  const [count,setCount] = useState(0);

  return(
      <div>  
          <button conClick={()=>setCount(count+1)}></button>
      </div>
  );
}

2. useEffect
   =>lifecycle:componentDidMount+componentDidMountUpdate+ComponentWillUnmount
   只要state更新，useEffect就会刷新

function Example(){
    const [count,setCount] = useState(0);
    useEffect(()=>{
        document.title = `you click ${count} times`;
    });
    return(
        <div>
            <button onClick={()=>{
                setCount(count +1)
              }}>Click</button>
        </div>
    )
}

3.reuse behaviors
useRepos.js

import {useState,useEffect} from 'react';

function useRepos(){
 const [repos,setRepos] = useState();
 const [loading,setLoading] = useState(true);

 useEffect(()=>{
     fetch('http://api.github.com/users')
         .then(response => response.json())
         .then(result=>{
               setRepos(result);
               setLoading(false);
           })
 })
return [loading,repos];
}
export default useRepos;

App.js

import React,{useState} from 'react';
import useRepos from './useRepos';

const App=()=>{
    const [loading,repos] = useRepos();
    const [name,setName] = useState('harry');
    function handleChange(e){
        setName(e.target.value);
    }
    return(
        <section>
              <input type="text" value={name} onChange={handleChange}/>
        </section>
    )
}