react中的redux(入门)

redux

 

 

通过 npm  下载  reddux

1.创建一个 store.js 文件

 

//  store.js

// 生成store这个对象的
import {createStore} from 'redux'
//creaeStore这个方法的参数必须是一个函数，这个函数我们叫reductor，且有俩个参数 state和action
var store=createStore(function(state=10,action){
    console.log(action)
    switch(action.type){
        case 'ADD':
            return state+action.payload
        case 'JIAN':
            return state-action.payload
        default:
            return state
    }
    //必须返回一个新的state值
})

export default store

2.现在  只要 将 store 文件 引入 想要 使用数据 的文件 

就可以 通过  store.getState() 就可以 获取到 你存储的 state 值

以App.js 为例

//  App.js

import React from 'react';
import './App.css';
//  将 store 引入 要 使用的文件中
import store from './Redux/store'
class App extends React.Component{
  constructor(props){
    super(props)
    this.fn=this.fn.bind(this)
  }
  render(){
    return(
      <div>
        <button onClick={this.fn}>+</button>
        <div>{store.getState()}</div>
      </div>
    )
  }
  fn(){
　　//dispath 调用 对应方法  payload传值  由store文件中的 action 接收
    store.dispatch({type:'ADD',payload:5})
  }
}

export default App;

3. 为了 保证  也页面  使用 的数据在修改后 重新渲染 需要 index.js 文件 改动

store有subscribe的方法 用于监听 

//   index.js

 4 import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import store from './Redux/store'
ReactDOM.render(<App />, document.getElementById('root'));
//store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数。
store.subscribe(function(){
    ReactDOM.render(<App />, document.getElementById('root'));
});
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();