Articles19
Tags0
Categories0

学习Redux和umi等,借鉴的博客和网站地址

学习redux和umi等,借鉴的博客和网站地址

1.中间件与异步操作(redux-thunk)

https://www.cnblogs.com/chaoyuehedy/p/9713167.html

(1) 中间件的用法:

 import {applyMiddleware createStore}from 'redux'

 import createLogger from 'redux-logger'

 const logger=createLogger();

 const store=createStore(

   reducer,

   applyMiddleware(logger)
 )

(2) Action发生变化:有三种:

{type:’FETCH_POSTS’}

{type:’FETCH_POSTS’,status:’error’,error:’ooo’}

{type:’FETCH_POSTS’,status:’success’,response:{….}}

(3) redux-thunk中间件:

 class AsyncSApp extends Component{ 

   componentDidMount(){

   const{dispatch,selectedPost}=this.props

   dispatch(fetchPosts(selectedPost))
   }
 }

 //向服务器要求数据 `fetchPosts(selectedSubreddit)`

 const fetchPosts=postTitle=>(dispatch,getState)=>{

 dispatch(requestPosts(postTtle));

 return fetch('/some/API/${postTitle}.json')

 .then(response=>response.json())

 .then(json=>dispatch(receivePosts(postTitle,json)))

 }

先发出一个Action(requestPosts(postTitle)),然后进行异步操作。拿到结果后,先将结果转成 JSON 格式,然后再发出一个 Action( receivePosts(postTitle, json))。

为了实现dispatch()的属性参数是函数,需要使用中间件:redux-thunk

使用redux-thunk中间件,改造store.dispatch,使得后者可以接受函数作为参数。

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducers';

// Note: this API requires redux@>=3.1.0
const store = createStore(
  reducer,
  applyMiddleware(thunk)
);

因此,异步操作的第一种解决方案就是,写出一个返回函数的 Action Creator,然后使用redux-thunk中间件改造store.dispatch

(4) redux-promise中间件

import { createStore, applyMiddleware } from 'redux';
import promiseMiddleware from 'redux-promise';
import reducer from './reducers';

const store = createStore(
  reducer,
  applyMiddleware(promiseMiddleware)
); 

写法一,返回一个Promise对象

const fetchPosts = 
      (dispatch,postTitle)=>new Promise(function(resolve,reject){
          dispatch(requestPosts(postTitle));
          return fetch('/some/Api/${postTitle}.json')
          .then(response=>{
              type:'fetch_posts',
                  payload: response.json() 
          })
      })

写法二:

import { createAction } from 'redux-actions';

class AsyncApp extends Component {
  componentDidMount() {
    const { dispatch, selectedPost } = this.props
    // 发出同步 Action
    dispatch(requestPosts(selectedPost));
    // 发出异步 Action
    dispatch(createAction(
      'FETCH_POSTS', 
      fetch(`/some/API/${postTitle}.json`)
        .then(response => response.json())
    ));
  }//createAction的第二个参数必须是一个 Promise 对象。

2.dva

https://dvajs.com/guide/getting-started.html#%E5%AE%89%E8%A3%85-dva-cli

与redux相比,多了model的形式,相当于把action和reducer,state,subscriptions,Effect封装起来

import key from 'keymaster';
...
app.model({
  namespace: 'count',
  subscriptions: {
    keyEvent({dispatch}) {
      key('⌘+up, ctrl+up', () => { dispatch({type:'add'}) });
    },
     }
     reducers:{
    'delete'(state,{payload:id}){
      return state.filter(item=>item.id!==id)
    }
  }
});

处理异步:Effect:

function *addAfter1Second(action,{put,call}){

  yield call(delay,1000)

   yield put({type:'add'
             })
};

Effect 是一个 Generator 函数,内部使用 yield 关键字,标识每一步的操作(不管是异步或同步)

  • call:执行异步函数
  • put:发出一个 Action,类似于 dispatch

订阅数据:Subscrption

subscription:{

  keyEvent({dispatch}){

  key('#+up,ctrl+up',()=>{dispatch({

   type:'add'
  })
                         })

}

dva的结构:

//创建

const app=dva();

//注册视图

app.router(()=>);

//启动应用

app.start(‘#root’);

3.UmiJS

https://umijs.org/zh/guide/#%E7%89%B9%E6%80%A7

4.antd:

https://pro.ant.design/index-cn

5.filter

对于数组操作,得到数组中满足某个条件的元素(数组过滤),可以使用filter

6.命名规范

https://www.cnblogs.com/imwtr/p/8521031.html

使用BEM命名规范来组织CSS代码

Author:shuo
Link:http://yoursite.com/2019/08/26/umi/
版权声明:本文采用 CC BY-NC-SA 3.0 CN 协议进行许可