react之react-redux

一般项目在开发过程中就会用到redux,这个时候就需要一个重要的工具react-redux!

什么是react-redux?

react-redux是react和redux结合的一个框架(工具),用来管理数据的state(状态)!首先需要明确的是redux是用来管理项目的state(状态)的,它可以是前后端的数据!

redux

• 1 . Actions
  action是一个对象.譬如下面的例子,这个action就是一个对象,里面包含了两个属性,一个是type,一个是value,这个两个对应的分别是:type----所要做的操作;value----数据

   		 add() {
   		      let action = { type: "list", value: inputText };
   		      return action;
   		    },

• 2 . Reducers

const reducer =  (state = defalutState, action) => {
   if (action.type === 'change_input') {
   	// state不可以直接修改,需要先进行深拷贝,然后再对值进行操作
       let newState = JSON.parse(JSON.stringify(state))
       newState.inputValue = action.value
       return newState
   }
 }

• 3 . Stroe

// 创建数据存储仓库
const store = createStore(reducer)     

store是用来管理state(状态)的单一对象.store有三个方法:
1.store.getState():获取state,可以通过这个方法获取到reducer中返回的一个新的state
2.store.dispatch(action):发出操作,在reducer对应的type对state进行更新
3.store.subscribe(listener):当state变化时,可以在该函数的回调中监听

react-redux

熟悉redux后再去react中去使用的时候就会容易很多了!这里主要是Provider(供应商)和connect(连接器)

• 1 Provider
  Provider的作用就是将我们使用rudux创建的store传递到内部的其他组件。让内部组件可以共享有这个store,同时提供对state的更新。

ReactDOM.render(<Provider store={store} ><AppRouter /></Provider>, document.getElementById('root'));

• 2 connect
  mapStateToProps的作用说的直白一点,可以通过stateToProps从reducer获取state,如下面的代码

const defalutState = {
   text: '你成功的获取了'
}
export default (state = defalutState, action) => {
 return state
 }

如果我们想在某个组件下获取text,我需要这么做

import React, { Fragment } from "react";
import ReactDOM from "react-dom";
import { connect } from "react-redux";
import store from "../../store";
class Result extends React.Component {
 constructor(props) {
   super(props);
   this.state = store.getState();
 }
 render() {
   let { text } = this.props;
   return (
     <Fragment>
       <h1>{text}</h1>
     </Fragment>
   );
 }
}
const stateToProps = (state) => {
 return {
   text: state.text,
 };
};
export default connect(stateToProps, null)(Result);

就可以获取到text的值了,如果在state返回之前,需要对text进行操作,也是可以的(Reducer里只能接收state，不能改变state,若是需要修改,先进行深拷贝,然后再对新的对象进行操作(针对于数据时对象的时候))
在实际的应用中,我们需要数据的传递和修改,然后才会在ui进行显示,这个时候就可以使用mapDispatchToProps了,一般在用mapDispatchToProps的时候都会跟mapStateToProps一起使用
mapDispatchToProps的作用说简单来说就是将action发送给reducer,然后在reducer中根据不同的action对数据进行不同的操作,代码如下:
通过

import React, { Fragment } from "react";
import { connect } from "react-redux";
import { Provider } from "react-redux";
import ReactDOM from "react-dom";
import store from "../../store";
import "./../../style/list.css";
class List extends React.Component {
 constructor(props) {
   super(props);
   this.state = store.getState();
 }
 render() {
   let { inputValue, inputChange, clickButton, list } = this.props;
   return (
     <div className="list">
       <div>
         <input value={inputValue} onChange={inputChange} />
         <button onClick={clickButton}>提交</button>
       </div>
       <ul>
         {list.map((item, index) => {
           return <li key={index}>{item}</li>;
         })}
       </ul>
     </div>
   );
 }
}
const stateToProps = (state) => {
 return {
   inputValue: state.inputValue,
   list: state.list,
 };
};
const dispatchToProps = (dispatch) => {
 return {
   inputChange(e) {
     let action = {
       type: "change_input",
       value: e.target.value,
     };
     dispatch(action);
   },
   clickButton() {
     let action = { type: "add_item",value:  inputValue};
     dispatch(action);
   },
 };
};
export default connect(stateToProps, dispatchToProps)(List);

对数据进行操作,返回最新的state,然后通过在ui进行显示

const defalutState = {
   inputValue: '',
   list: [],
   text: ''
}
export default (state = defalutState, action) => {
   if (action.type === 'change_input') {
       let newState = JSON.parse(JSON.stringify(state))
       newState.inputValue = action.value
       return newState
   }
   if (action.type === 'add_item') {
       let newState = JSON.parse(JSON.stringify(state))
       newState.list.push(newState.inputValue)
       newState.inputValue = ''
       return newState
   }
   if (action.type === 'list') {
       let newState = JSON.parse(JSON.stringify(state));
       newState.text = action.value
       return newState
   }
   return state
}

以上是react-redux的基础应用,使用起来很流畅,记录一下方便以后复习