redux在react项目中的应用

今天想跟大家分享一下redux在react项目中的简单使用 1 
1.redux使用相关的安装 2 yarn add redux 3 yarn add react-redux(连接react和redux) 6 7 2. redux在项目中的基础使用 8 9 1.在index.js入口文件注入store 10 import { Provider } from "react-redux" 11 import store from "./redux/store" 12 ReactDOM.render( 13 <Provider store={ store }> 14 <App /> 15 </Provider>, 16 document.getElementById("root") 17 ) 18 19 2.新建一个store文件夹,新建store.js和reducers.js文件 20 21 3.在store.js文件中书写以下代码 22 import { createStore} from "redux" 23 import reducers from "./reducers" 24 const store = createStore(reducers); 25 export default store 26 27 4.在reducer.js文件中书写以下代码 28 const defaultState = { 29 list:[] 30 } 31 export default (state=defaultState, action)=>{ 32 if(action.type === 'add'){ 33 return { 34 list:[...state.list,action.payload] 35 } 36 } 37 return state 38 } 39 40 5.如何在子组件中使用store(直接引入store.js也可以,但不推荐) 41 import { connect } from "react-redux" 42 const mapState = (state)=>{ 43 return { 44 //获取store中的值,将list注入组件的props中 45 list:state.list 46 } 47 } 48 const mapDispatch = (dispatch)=>{ 49 return { 50 //返回一个add方法,将其注入组件的props中,组件可直接通过this.props.add()调用 51 add(){ 52 dispatch({ 53 type:'add', 54 payload:'ldc' 55 }) 56 } 57 } 58 } 59 //connect执行完后返回的是一个高阶组件,再将Home注入强化 60 export default connect(mapState,mapDispatch)(Home) 61 62 6.在组件中调用 63 <ul> 64 { 65 this.props.list.map((val,index)=>{ 66 return <li key={index}>{val}</li> 67 }) 68 } 69 </ul> 70 <button onClick={this.props.add}>ADD</button> 71 72 7.这样简单的redux在项目中使用就完成了

 

posted @ 2018-11-20 20:30  KingJaz  阅读(529)  评论(0编辑  收藏  举报