一个前端,爱跑步、爱吉他、爱做饭、爱生活、爱编程、爱南芳姑娘,爱我所爱。世间最温暖又无价的是阳光、空气与爱,愿它们能带你去更远的地方。

  • 文章
  • 心情
  • 照片墙
  • 留言板
  • 工具
  • 友链
  • biaoblog

    专注web开发技术分享

    redux学习记录

    技术 265 2019-08-16 14:18

    redux中的state:

    1.安装redux

    $ npm i redux --save
    

    2.进行引入:

    import { createStore } from 'redux'
    

    3.创建reducer进行管理

    const defaultState = {
     list:[
     '早8点开晨会,分配今天的开发工作',
     '早9点和项目经理作开发需求讨论会',
     '晚5:30对今日代码进行review'
     ]
    }
    export default (state=defaultState,action)=>{
     return state
    }
    

    4.在仓库中进行引入:

    import reducer from './reducer'
    

    5.创建数据管理仓库并注入reducer并把仓库暴露出去:

    const store = createStore(reducer)
    export default store;
    

    6.在组件中进行引入:

    import store from './store'
    

    7.获取到仓库中的数据

    console.log(store.getState())
    

    reducer中的action:

    1.在组件中写个方法并创建action

    test(){
     const action = {
    	type:"getItem"
    }
    

    //把action派遣到仓库中

    store.dispatch(action)
    

    2.在reducer中根据action的type进行操作:

    export default(state=defaultState ,action){
     // 在reducer中只能接收state但不能改变 (只读),所以用newState 进行拷贝。
    	let newState = state
     if(action.type === "getItem'' ){
     //模拟添加一条
     newState.list.push(newState.inputVal)
     //返回 newState其实就是实现仓库数据的更新
     return newState
    }
    }
    

    3.在react老版本中,仓库进行了更新了以后,需要在组件中进行订阅(subscribe)。

    class TodoList extends Component {
     constructor(){
     super()
     this.state = store.getState()
     this.storeChange = this.storeChange.bind(this)
     //订阅Redux的状态 改变仓库的状态
     store.subscribe(this.storeChange)
     }
    

    4.在组件里面写一个方法storeChange,其实就是又去获取一下store的状态。

     storeChange(){
     // 需要使用this.setState()
     // getState是store的固定函数 获取状态
     this.setState(store.getState())
     }
    

    5.actionType的优化方法:创建一个actionType的文件。

    export const GET_ITEM = 'getItem'
    

    6.在组件和仓库中进行引入和调用。

    import {GET_ITEM } from './store/actionType'
    

    优势:快速显示报错。

    7.action方法的优化,建立单独的js文件,进行创建、并在组件中引用使用:

    import {CHANGE_INPUT,ADD_VALUE,DEAL_ITEM} from './actionType'
     const changeInputAction = (value)=>({
     type:CHANGE_INPUT,
     value:value
     })
    const addValue = () =>({
     type:ADD_VALUE,
    })
    const dealItem = (index) =>({
     type:DEAL_ITEM,
     index:index
    })
    export {
     changeInputAction,
     addValue,
     dealItem
    }
    

    组件中通过:const action = changeInputAction(value) 并 dispatch(action)


    reducer需要注意的三点:

    1.Store必须是唯一的

    2.只有store能改变自己的内容,Reducer不能改变(通过return newState)

    3.Reducer必须是纯函数。纯函数:如果函数的调用参数相同,则永远返回相同的结果。它不依赖于程序执行期间函数外部任何状态或数据的变化,必须只依赖于其输入参数。


    react-redux 持久化 仓库配置(包含thunk,history,等)

    import { createStore, applyMiddleware, compose } from "redux";
    import thunk from "redux-thunk";
    import { persistStore, persistReducer } from "redux-persist";
    import storage from "redux-persist/lib/storage";
    import { routerMiddleware } from "connected-react-router";
    //引入汇总之后的reducer
    import createRootReducer from "./reducers";
    import { createBrowserHistory as createHistory } from "history";
    export const history = createHistory();
    let composeEnhancer = compose;
    //在localStorge中生成key为root的值
    const persistConfig = {
      key: "root",
      storage,
    };
    
    if (process.env.NODE_ENV !== "production") {
      composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
    }
    const router = routerMiddleware(history);
    const myPersistReducer = persistReducer(
      persistConfig,
      createRootReducer(history)
    );
    
    
    const store = createStore(
      myPersistReducer,
      composeEnhancer(applyMiddleware(thunk, router))
    );
    
    
    export const persistor = persistStore(store);
    
    
    export default store; //暴露出去
    
    
    

    然后在App.js中进行引入

    import { Provider } from 'react-redux'
    import { PersistGate } from 'redux-persist/es/integration/react'
    import store, { persistor } from './redux/store/index'
    import AppRouter from './router'
    function App() {
      return (
        <Provider store={store}>
          <PersistGate loading={null} persistor={persistor}>
            <AppRouter />
          </PersistGate>
        </Provider>
      )
    }
    
    export default App
    

    然后往仓库存储一个数据,刷新,发现持久化Ok了,下课

    文章评论

    评论列表(0