Redux和React-Redux学习笔记

Redux 是一个通用的状态管理工具,并不局限于某一个框架,只是下雨天(项目中)巧克力(react)和音乐(redux)更配哦!

*Redux工作流程:发送一个actionreducer,然后reducer返回值给store

这个过程如同你去逛某宝,你想买双鞋,你就要在搜索框中输入你想买的东西的类型,然后你点搜索,这个动作就是action。这个action 得交给一个特定的部门来处理,也就是reducer,处理完之后就会把你想要的东西返回到“数据库”当中,也就是我们这里的store

Redux

首先,创建一个store仓库

	import { createStore } from "redux";
	import { reducer } from "./reducer";
	
	const store = createStore(reducer);
	
	export default store;

创建一个reducer

	const initValue = {
	    value: '默认值'
	}
	
	const reducer = (state = initValue, action) => {
	    switch (action.type) {
	        case 'send_type':
	            return Object.assign({}, state, action)
	        case 'login':
	            return Object.assign({}, state, action)
	        default:
	            return state
	    }
	}
	
	module.exports = {
	    reducer
	}

这是action

	const sendAction = () => {
	  return {
	    type: "send_type",
	    value: "我是action",
	  };
	};
	
	module.exports = {
	  sendAction,
	  loginInfo,
	};

在页面中用store.subscribe订阅store的变化

    componentDidMount() {
        this.unSubscribe=store.subscribe(() => {
            this.forceUpdate()
        })
    }

当然也需要取消订阅

    componentWillUnmount(){
        //在页面卸载时取消订阅,防止内存泄漏
        this.unSubscribe()
    }

在页面中我们可以通过store的getState方法获取到数据

	 <h3>{store.getState().value}</h3>

redux小结:
1、构建action,通过创建一个函数,然后返回一个对象,需要注意携带type属性
2、构建reducer,用来相应action,然后通过return把数据传回给store
3、利用createStore来构建store,构建的时候传递我们写好的reducer
4、利用store.subscribe()注册监听
5、当我们利用store.dispatch()发送一个action的时候就能出发我们的监听了,在里面       利用store.getState()就能拿到值

React-Redux

React-Redux相较于Redux,有两个比较重要的概念:

1、Provider:这个组件能够使你整个APP都能获取到store中的数据

2、connect:这个方法能够使组件和store进行关联,如果我们需要接受Provider提供                       的store就需要把我们组件通过connect进行加强

下面我们用代码进行详细讲解:

首先引入Provider和我们的store,将Provider套在App组件的最外层并将store传进去

    <Provider store={store}>
      <Router>
        <Switch>
          <Route path='/home' component={Home} />
          <Route path='/reduxDemo' component={ReduxDemo} />
        </Switch>
      </Router>
    </Provider>
  • connect方法后面有两个括号,第一个括号有四个参数,通常只有前面两个参数比较常用,第二个括号里面放我们需要加强的组件
	const mapDispatchToProps = (dispatch) => {
	  return {
	    sendAction: () => {
	      dispatch({
	        type: "add_action",
	      });
	    },
	  };
	};
	
	const mapStateToProps = (state) => {
	  return {
	    state,
	  };
	};
	export default connect(mapStateToProps, mapDispatchToProps)(ReactRedux);

combineReducers 合并多个reducer

import { createStore, combineReducers } from "redux";
import { userReducer } from "./userReducer";
import { loginReducer } from "./loginReducer";

const reducer =  combineReducers({
  userReducer,
  loginReducer,
})

export default createStore(reducer);

react-redux工作流程思路导图:
在这里插入图片描述


版权声明:本文为weixin_45932565原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
THE END
< <上一篇
下一篇>>