redux的入門學習 分離的鞏固

2021-10-14 04:24:47 字數 3137 閱讀 6375

1:新建乙個兩個頁面   乙個頁面放使用者的新增    乙個頁面使用者的列表  

import react,  from 'react'

export default class useradd extends component

}

import react,  from 'react'

import "../css/user.css";

export default class userlist extends component

}

2:在reducer中新建乙個userreducer.js  

let   initstate = ]

}let userreducer =(state=initstate,action)=>

export default userreducer;

3:reducer的合併   store/index.js中

import   from  "redux"

import numreducer from "../reducer/numreducer"

import userreducer from "../reducer/userreducer";

let allreducer = combinereducers();

export default createstore(allreducer);

4:使用者列表使用userreducer中的list

import react,  from 'react'

import "../css/user.css";

import store from "../store";

export default class userlist extends component

render() 刪除)

})})

}}

5:新增使用者介面

import react,  from 'react'

import store from "../store";

export default class useradd extends component

})}}>新增)}

}

6:修改userreducer

let   initstate = ]

}let userreducer =(state=initstate,action)=>

}return state;

}export default userreducer;

7:分離

常量action/index.js中

export  default
物件 

action/useraction.js中

import   actiontype  from  "./index";

let add = (playload)=>

}export

reducer/userreducer.js

import   actiontype from  "../action"

let initstate = ]

}let userreducer =(state=initstate,action)=>

}return state;

}export default userreducer;

add的頁面中  修改dispatch的呼叫

import react,  from 'react'

import store from "../store";

import from "../action/useraction"

export default class useradd extends component ));

}}>新增)}

}

在新增乙個刪除和資料初始化

action/index.js中 

export  default
action/useraction.js中

import   actiontype  from  "./index";

let add = (playload)=>

}let del = (playload)=>

}let init =(playload)=>

}export

reducer/userreducer.js中

import   actiontype from  "../action"

let initstate =

let userreducer =(state=initstate,action)=>

case actiontype.deleteuser:

return

case actiontype.inituser:

return

}return state;

}export default userreducer;

在頁面呼叫和使用

import react,  from 'react'

import "../css/user.css";

import store from "../store";

import from "../action/useraction"

export default class userlist extends component

componentdidmount(),]

store.dispatch(init(list));

this.forceupdate();

}render()

}>刪除

) })})}

}

Redux 入門學習

2014年 facebook 提出了 flux 架構的概念,引發了很多的實現。2015年,redux 出現,將 flux 與函式式程式設計結合一起,很短時間內就成為了最熱門的前端架構。redux 是乙個改變狀態 state 的模型,這個模型通過乙個單向操作的方式來改變狀態。redux 和 react...

redux的入門學習 使用react redux

1 使用react redux 簡化的 頁面端的使用 業務的分離的分離不會變 2 減少store的引入 3 簡化state的呼叫 和 state修改的方法的使用 類似vuex中 mapstate和mapmutation 第一步 安心 npm i react redux 第二步 引入和使用 全域性配置...

redux之入門學習

總結 1 頁面上view通過store.dispatch 發出 action,action統一在actioncreators.js檔案中,2 store 收到 action 以後,執行reducer.js中對應的方法,reducer是乙個函式,它接受 action 和當前 state 作為引數,返回...