今天想跟大家分享一下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在项目中使用就完成了
