redux+react-cli创建数据仓库

介绍

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。

安装
npm i redux -S
npm i redux-react -S

要引用的模块及作用

import { combineReducers，createStore  } from 'redux'
import {connect,Provider} from 'react-redux'

代码片段及解释

createStore

用于创建一个redux仓库
let redux1 = function(state = {name:'张山',age:123},action){
// action是一个 对象 作用是当state对象中的发生改变就会再次执行这个函数
// action是组件改变仓库中的属性 注： 这里是state中的内容 在组件中是props
// 因为props是只读属性所以要这样修改 也可以实现数据的共享
// action:{type:"算是一种标记，用来标记那个值被修改然后通过switch来确认要执行的内容",被修改过后的值}
 		return state
 		// state就是仓库中的数据
}
let store = createStore(redux1)
成功创建一个仓库

Provider

ReactDOM.render(<Provider store={store} ><App age={1} /></Provider>, document.getElementById('root'));
// 将App组件和该仓库绑定到一起
// 如果 App自身上绑定的props和仓库中state有相同的属性名就会发生冲突，仓库中的state会覆盖组件自身上绑定的props的内容
// 解决上述问题的方法
// 在connect中 connect()这个方法的参数是一个回调函数
// connect((state,props)=>{
//  	state是仓库中内容
//      props是自身绑定的内容
//  	retrun state 这里是将state 这个对象放到 组件this.props的这个属性上
//		所以才会有冲突
//    	解决方法 
//		return {...state,age:props.age}
// })

connect

import React,{Component} from 'react';
class App extends Component {
  constructor (){
        super()
        this.state={
            name:'12'
        }
    }
 async componentDidMount(){
   // var na = await axios.get('/aaa.json')
   // console.log(na)
     console.log("12",this.state)
 }
 cha(){
     this.props.setName("zhangshanysdnhsj")
     // 修改props中的属性要使用这种方法
     // props是只读属性
     // 触发connect()方法中的第二个参数对象中对应的方法
     // 然后回触发createStore() 中的参数的那个函数 重写加载一次仓库通过action属性来实现一系列操作
 }
 add(){
    this.props.addAge(7)
 }
  render(){
      return  (
          <div className="App">
              {this.props.name},{this.props.age}
              <Children />
              <button onClick={()=>{this.cha()}}>改名</button>
              <button onClick={()=>{this.add()}}>add</button>
          </div>
      );
  }
}
export default connect((state,props)=>{
    // 使用redux创建的store仓库对象
    // 自身上绑定的props中的属性
    // 每次修改属性 这里的内容都会执行
    console.log(props)
    console.log(state);
    return {
        ...state.user,
    }
},{  // 自己定义的一些用来改变props的属性的方法的对象
	
    setName(name){
        console.log(name)
        return {
            type:SET_NAME, // type属性是必须的 没有会报错
            name
        }
    },
    addAge(age){
        return {
            type:ADD_AGE,
            age
        }
    }
})(App);
实现App组件和仓库的链接

combineReducers

用来将多个仓库绑定到一起
import user from './reduce1'
import compeny from './reduce2'
// 假如上面是我引入的两个仓库 （在被createStore()前的一个函数）
let arr = combineReducers({ // 这样就会把两个仓库绑定到一起
    user,
    compeny
})
ReactDOM.render(<Provider store={arr} ><App age={1} /></Provider>, document.getElementById('root'));
这样就绑定上去了
但是使用的使用是要注意
像这样
connect((state,props)=>{
    return state.user
})(App)
connect((state,props)=>{
    return state.compeny
})(Children)
要引入每个组件对应的仓库
当然也可以引用同一个来实现数据的共享