redux简要理解

进阶1.原生redux中的store(Provider原理:基于store.subcribe()封装)

connect将props、dispatch连接到组件上。

provider基于store.subscribe()封装，如果store发生变化，会自动更新store,触发重渲染。

如果不写provider，需要手动监听、更新render。

index.js

store.subscribe(()=>{
    render();
});

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

页面

this.props.store.getState().r1

进阶2.抽离出actionCreator.js,返回action creators 函数。this.props.store.dispatch派发

(1)抽离出actioncreators.js文件，返回action对象

(2)页面引入actioncreators.js文件，调用actioncreators.js文件中方法

import {add} from './actions/actionCreator';

this.props.store.dispatch( add() );

进阶3.provider+connect,this.props.diapatch({})派发

index.js

<Provider store={store}><App /></Provider>

app.js

import * as actions from './actions/actionCreator';

this.props.dispatch(actions.add())

{this.props.num}

export default connect(state => {
    return {num: state.r1}; 
})(App);

进阶4.使用bindActionCreators,将action函数挂在this.props下面。

import {bindActionCreators} from 'redux'

this.props.add();

export default connect((state)=>{
 return {num:state.r1};
},(dispatch)=>{
  return bindActionCreators(actions,dispatch)
})(App);

总结：

redux

createStore(reducer)

combineReducers({})

bindActionCreators(actionCreators,dispatch) // 返回一个对象。
可通过this.props直接获取actionsCreators中每个函数。 actionCreators:派发action的函数

例如:

function add(){
    return {
        type:"ADD",// 保证唯一性
        payload:{}
    }
}

react-redux

Provider作为顶层组件，传入store

哪个组件需要状态管理器(store)中的数据，就用connect高阶组件传入

connect()(APP)

let mapStateProp = (state,ownProps)=>{ 
    state状态管理器中的所有数据，也可以返回一个当前组件需要的数据
    return state;  //必须返回对象(否则报错)
}

let mapDispatchProp = (dispatch,ownProps) => {
    return bindActionCreators(actionCreators,dispatch)
}

ownProps:只要接收到的新的父级传进来的数据，就会在运行一次此函数，从而connect更新页面状态，视图更新

connect(mapStateProp,mapDispatchProp)(App)

上面为代码片段，详细见：

https://github.com/Cjgfree123/redux-learn-demo/commits/master

补充:

connect装饰器写法

装饰器写法。将connect()写在组件类声明上面。注意：若采用装饰器写法，就不能使用无状态函数来编写组件。因为装饰器添加在类声明上面。

同时，必须使用static propTypes={}这种静态属性的写法，来声明props类型。

container.js

import * as ActionCreators from "../actions";

@connect(
  state=>({counter:state.counter}),
  ActionCreators
);

class Counter extends React.Component{
  static propTypes={
    counter:propTypes.number.isRequired,
  }

  render(){
    ....
  }
}