redux & react-redux

redux 

redux 支持 react jquery angular

安装对应版本的redux

创建一个store 文件夹{index.js    action/index.js  reducer/index.js}

action/index.js
const sendAction =()=>{    return{        type:'send_Action',        value:"发送了一个action"    }}moudle.export={    sendAction}

reducer/index.js
const initState = {    value:'我是初始化state'}const reducer = (state =initState ,action)=>{       switch(action.type){        case 'send_Action':            return Object.assign({},state,action)        default:            return state    }}moudle.export={    reducer}

index.js
import {createStore} from 'redux'import {reducer} from './reducer'const store = createStore(reducer);export default store;

使用

function Home() {  handleClick =()=>{  const action = sendAction()  //发送一个action,利用store  store.dispatch(action)}
页面使用
<div>{store.getState().value}</div>

问题一: dispatch触发action，页面数据未更新

   componentDidMount =()=>{    store.subscribe(()=>{      this.setState({}) //更新数据    })   }

react-redux

安装react-redux

npm install react-redux
依赖 npm install redux

两个重要的方法： provider  connect

provider  这个组件能够使整个app 都能获取store中的数据
connect   这个方法能够使store 和组件之间进行关联

react-redux 基础构建 action  reducer store 构建同上, redux 状态数据全局应用

provider应用

app.js
import store from './store/index'
import {Provider} from 'react-redux'
function App(){
    return (
        <Provider store={store}>
            <div>
                <A/>
                <B/>
            </div>
        </Provider>
    )
}

connect 使用

A 发送方
导入connect 方法
import {connect} from 'react-redux'
调用connect 方法
connect（mapStateProps,mapDispatchToProps,mergeProps,options)
class A extends React.component{    
    handleClick = ()=>{
        console.log('A',this.props)
        this.props.sendAction()
    }
    render <button onClick = {this.handleClick}> + </button>
}
const mapDispatchToProps = (dispatch) =>{ //dispatch 发送action
    return {
        sendAction:()=>{
            dispatch(sendAction()) //此处调用的sendAction 是 action/index中声明的action
        }
    }
}
export default connect(null,mapDispatchToProps)(A) //接收数组的函数 发送action的函数 要加强的组件



B 接收方
import {connect} from 'react-redux'
class B extends React.component{
    render(){
        //this。props.count 获取到的是connect 关联后传递给B组件的值
        return <div>{this.props.value}</div>
    }
}
connect(state=>state)(B)