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對象注入到組件上

//狀態和狀態方法連接到我們的組件上

 

 

 

狀態管理實現步驟：

計數小案例：
1.組件設置
class Counter extends React.Component {
  render() {
    const { value, onIncreaseClick } = this.props
    return (
      <div>
        <span>{value}</span>
        <button onClick={onIncreaseClick}>Increase</button>
      </div>
    )
  }
}
2.mapStateToProps（返回state中被更改的值）/mapDispatchToProps（返回被觸發的方法改變的內容）定義

3.定義根據action，{tpye:'類型'，其他屬性（一般用於傳值）}對象真正更改state的函數，要更改視圖的話，必須返回全新的state，reduce函數
 
4.創建倉庫對象
var store = createStore(reduce函數)
 
 5.將內容與組件相連接
var App = connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter)
 
6最終將store綁定到組件，並且渲染出來
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);