react-redux笔记

redux与react-redux使用

1. store.js

   import { createStore } from 'redux';
   const defaultState = {
       list:['这是一个测试']
   }
   const reducer = (state = {...defaultState},action)=>{
     const {type,payload} = action;
     if(type ==='addItem'){
         const obj = {...state};
         obj.list = [...obj.list,payload];  //这里不能是obj.list.push(payload); 否则页面视图不更新
         return obj;
     }
     return state;
   }
   const store = createStore(reducer); //设置默认值，也可以通过createStore来指定第二个参数 
   /*
    如
    const store = createStore(reducer,defaultState,appMiddleware(thunk))
   */
   export default store;

2. 根组件 index.jsx

   import { Provider } from 'react-redux';
   import Store from './store';
   root.render(
     <React.StrictMode>
       <Provider store={Store}>
         <App />
       </Provider>
     </React.StrictMode>
   );

3. 在需要使用的地方使用connect封装为高阶组件

   class InputGroup extends React.Component{
      constructor(props){
          super(props);
      }
      state = {
           name:'yuhong',
           age:22,
           count:11
      }
     submit = ()=>{
       const value = this.input.value;
       this.props.handleList(value)
      }
      render(){
           return (<div>
               <input type="text" ref={el=>this.input = el}/><button onClick={this.submit}>提交</button>
               {JSON.stringify(this.props.list)}
         </div>)
      }
   }
   const mapStateToProps = state=>{
       return {
         list:state.list
       }
   }
   /**
     mapDispatchToProps有两种写法，一种是申明是直接对象   -------[首选]
   **/
   const mapDispatchToProps = {
       handleList(payload){
           return {
               type:'addItem',
               payload
           }
       }
   }
   
   /**
   另外一种是写state相同，是一个函数，此时拥有dispatch参数
   **/
   const mapDispatchToProps = dispatch=>{
      return {
           handleList(payload){
         	   dispatch({
               type:'addItem',
               payload
           })  
         }
      }
   }
   export default connect(mapStateToProps,mapDispatchToProps)(InputGroup);

总结为createStore时，从redux中引入，而Provider 或者 connect是从react-redux中引入

redux-thunk中间件

使用

import { createStore,applyMiddleware } from 'redux'
import reduxThunk from 'redux-thunk';
const defaultState = {
    list:['默认的空列表'],
    count:0
}
const reducer = (state = {...defaultState},action)=>{
    const {type}  = action;
    if(type === 'ADDITEM'){
        const data = {...state,list:[action.payload,...state.list]};
        return data;
    }
    return state;
}
const store = createStore(reducer,applyMiddleware(reduxThunk));
export default store;

在需要使用的地方mapDispatchToProps中返回一个对象，变为返回一个函数，函数接收一个参数dispatch

const mapDispatchToProps = {
    delItem(payload){
        
        return (dispatch)=>{
            setTimeout(()=>{
                dispatch({
                    type:'DELITEM',
                    payload
               })
            },1000)
        }
        
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(List);

数据持久化

官方文档：https://www.npmjs.com/package/redux-persist

将会把store中的state通过localstroge缓存 在浏览器中,如果需要清除时，可以使用localstorge.removeItem()去重置

import { createStore } from 'redux'

import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage' // defaults to localStorage for web
 
import rootReducer from './reducers'   //reducer函数
 
const persistConfig = {
  key: 'root',
  storage,
  blacklist : [ 'count','list' ] // state中的count,list不会被持久化 
} //持久化的配置项
 
const persistedReducer = persistReducer(persistConfig, reducer)
 
export default () => {
  let store = createStore(persistedReducer)
  let persistor = persistStore(store)
  return { store, persistor }
}

//export default可以不用非要导出一个函数   以下也可以
 let store = createStore(persistedReducer)
  let persistor = persistStore(store)
export default { store, persistor }

redux装饰器

安装

yarn add @babel/plugin-proposal-decorators

修改package.json

"babel": {
   "presets": [
     "react-app"
   ],
   "plugins": [
     [
       "@babel/plugin-proposal-decorators",
       { "legacy": true }
     ]
 ]
 }

使用

@connect(
  state=>{
    return {
       count:state.count,
       list:state.list
    }
  },
  dispatch=>{
    return {
        addCount(){
          dispatch({type:'requestAddCount',payload:{count:parseInt(Math.random() * 100)}})
        },
        subCount(){
          dispatch({type:'requestSubCount',payload:{ count:100 }})
        }
    }
  }
) class A extends Component{
    //....
    /**
      addItem(){
        this.props.addCOunt()
      }
    **/
}

react支持@connect装饰器写法，详细搜索

https://www.baidu.com/s?wd=redux%E8%A3%85%E9%A5%B0%E5%99%A8&rsv_spt=1&rsv_iqid=0xad15fc8e00209232&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&rqlang=cn&tn=baiduhome_pg&rsv_dl=tb&rsv_enter=0&oq=This%2520experimental%2520syntax%2520requires%2520enabling%2520one%2520of%2520the%2520following%2520parser%2520plugi&rsv_btype=t&inputT=13153&rsv_t=24c3tLQ4NwUIF934RfqZjgxprMXwE2%2FkTOaC7%2FXkwZs3ukCtOHDsTP%2BAvUD93Kvuzo5o&rsv_pq=b44774f10008fc5f&rsv_sug3=57&rsv_sug1=46&rsv_sug7=100&rsv_sug2=0&rsv_sug4=13281