# react-study

**Repository Path**: feiqp/react-study

## Basic Information

- **Project Name**: react-study
- **Description**: react、react-router、redux、node基础学习demo
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-04-09
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React

## README

npm run eject执行后可自行配置webpack

npm install express --save 使用express起服务器（server/server.js）
express依赖cookie-parser,npm install cookie-parser --save,cookie用于用户登录验证
每次修改需要手动更新，所以npm install -g nodemon
使用nodemon server.js

Mongodb+express
官网下载安装mongodb

******Redux: store,state,action,reducer
store里面保存所有的记录state；当某些值需要改变的时候，需要告诉dispatch要干什么action
处理变化的reducer拿到state和action，生成新的state
import {createStore} from 'redux'

//根据老的state和action，生成新的state
function counter(state=0,action){
   switch (action.type) {
      case 'add':
        return state+1
      case 'reduce':
        return state-1
     default:
        return 10
       break;
   }
}
//新建store
const store = createStore(counter)
const init = store.getState()
console.log(init)

function listener(){
  const current = store.getState()
  console.log(current)
}
//订阅时间，每次dispatch都会监听到数据的变化，然后执行
store.subscribe(listener)

// 事件派发，传递action
store.dispatch({type: 'add'})
store.dispatch({type: 'add'})
store.dispatch({type: 'reduce'})

****redux和react一起使用，手动链接
为了完全解耦，另建一个redux文件 
index.redux.js
const ADD = 'add'
const REDUCE = 'reduce'

export function counter(state=0,action){
   switch (action.type) {
      case ADD:
        return state+1
      case REDUCE:
        return state-1
     default:
        return 10
       break;
   }
}

export function addNum(){
    return {type: ADD}
}

export function reduceNum(){
    return {type: REDUCE}
}

index.js中使用并组建传参的形式
import { counter,addNum,reduceNum } from './index.redux.js'
const store = createStore(counter)
function render(){
   ReactDOM.render(
    <App store={store} addNum={addNum} reduceNum={reduceNum}/>,
    document.getElementById('root')
  );
}
render()
store.subscribe(render)

app.js里调用即可
class App extends React.Component{
  render(){
    const store = this.props.store
    const num = store.getState()
    const addNum = this.props.addNum
    const reduceNum = this.props.reduceNum
    return (
      <div>
        <h1>现在是值是{num}</h1>
        <button onClick={()=>store.dispatch(addNum())}>加</button>
        <button onClick={()=>store.dispatch(reduceNum())}>减</button>
      </div>
    )
  }
}

redux处理异步，需要redux-thunk插件，使用applyMiddleware开启中间件
import {createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import { counter,addNum,reduceNum,addNumAsync,reduceNumAsync } from './index.redux.js'
const store = createStore(counter, applyMiddleware(thunk))

index.redux.js模拟异步
export function addNumAsync(){
    return dispatch=>{
        setTimeout(()=>{
           dispatch(addNum())
        }, 2000)
    }
}

export function reduceNumAsync(){
    return dispatch=>{
        setTimeout(()=>{
           dispatch(reduceNum())
        }, 2000)
    }
}


调试工具
npm install redux-devtools-extension并且开启
import {createStore, applyMiddleware, compose } from 'redux'
引入compose
const reduxDevtools = window.devToolsExtension?window.devToolsExtension():f=>f
const store = createStore(counter, compose(applyMiddleware(thunk),reduxDevtools))
在控制台就可以看见state的变化


使用react-redux优雅的链接react和redux
npm install react-dedux --save
忘记subscribe，记住reducer，action和dispatch；提供了provider和connect两个接口来链接
 Provider组件在应用最外层，传入store即可，只使用一次
 import { Provider } from 'react-redux'
   ReactDOM.render(
    (<Provider store><App/>,</Provider>)
    document.getElementById('root')
  );

  Connect负责从外部获取组件需要的参数，可以用装饰器的方式来写
  app.js引入import { connect } from 'react-redux'
  import { addNum,reduceNum,addNumAsync,reduceNumAsync } from './index.redux.js'

const mapStatetoProps =(state)=>{
  return {num:state}
}

const actionCreators = {addNum, reduceNum, addNumAsync, reduceNumAsync}

App = connect(mapStatetoProps,actionCreators)(App)
export default App


************redux-router
核心 概念：动态路由，route,link,switch
BrowserRouter，包裹整个应用
Router路由对应渲染的组件，可嵌套
link跳转专用
Route组件参数可用冒号标识参数
redirect组件跳转
switch只渲染一个子Route
组件使用时，组件注册要在使用之前，没有组件的或者function的变量提升


***************redux和react-router的复杂使用
复杂redux应用，多个reducer，使用combineReducer合并
import { combineReducers } from 'redux'
import { counter } from './index.redux.js'
import { auth } from './Auth.redux.js'

export default combineReducers({counter,auth})
在index页面，引用全部的reducer
import reducer from './reducer.js'
const store = createStore(reducer, compose(applyMiddleware(thunk),reduxDevtools))

******axios拦截器的使用
axios.interceptors.request.use(function(config){
  Toast.loading('加载中',0)
  return config
})

axios.interceptors.response.use(function(config){
  setTimeout(()=>{
    Toast.hide()
  },2000)
  return config
})