react框架的状态管理

安装：

cnpm install --save redux

cnpm install --save react-redux

 

安装好后导入模块内容：

impor {createStore} from 'redux'

 

import {Provider,connect} from 'react-redux'

 

 

导入模块：

import { createStore } from 'redux'

//createStore方法用于创建管理状态的仓库对象

import { Provider,connect } from 'react-redux'

//Provider将store对象注入到组件上

//状态和状态方法连接到我们的组件上

 

 

 

状态管理实现步骤：

计数小案例：
.组件设置
class Counter extends React.Component {
  render() {
    const { value, onIncreaseClick } = this.props
    return (
      <div>
        <span>{value}</span>
        <button onClick={onIncreaseClick}>Increase</button>
      </div>
    )
  }
}
.mapStateToProps（返回state中被更改的值）/mapDispatchToProps（返回被触发的方法改变的内容）定义

.定义根据action，{tpye:'类型'，其他属性（一般用于传值）}对象真正更改state的函数，要更改视图的话，必须返回全新的state，reduce函数

.创建仓库对象
var store = createStore(reduce函数)

 .将内容与组件相连接
var App = connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter)

6最终将store绑定到组件，并且渲染出来
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);