Redux怎么实现属性传递,介绍下原理
react-redux 数据传输: view- ->action- ->reducer-->store-->view
具体点击事件的数据通过redux传到view上:
- view 上的ADDClick事件,通过mapDispatchToProps 把数据传到action ---> click: ( ) =>dispatch ( ADD )
- action的ADD 传到 reducer上
- reducer传到store上 const store = createStore ( reducer ) ;
- store 通过 mapStateToProps 映射到view上
具体代码实现:
import React from 'react';import ReactDOM from 'react-dom';import { createStore } from 'redux';import { Provider, connect } from 'react-redux';class App extends React.Component{ render(){ let { text, click, clickR } = this.props; return( <div> <div>数据:已有人{text}</div> <div onClick={click}>加人</div> <div onClick={clickR}>减人</div> </div> ) }}const initialState = { text:5}const reducer = function(state,action){ switch(action.type){ case 'ADD': return {text:state.text+1} case 'REMOVE': return {text:state.text-1} default: return initialState; }}
let ADD = { type:'ADD'}let Remove = { type:'REMOVE'}
const store = createStore(reducer);
let mapStateToProps = function (state){ return{ text:state.text }}
let mapDispatchToProps = function(dispatch){ return{ click:()=>dispatch(ADD), clickR:()=>dispatch(Remove) }}
const App1 = connect(mapStateToProps,mapDispatchToProps)(App);
ReactDOM.render( <Provider store = {store}> <App1></App1> </Provider>,document.getElementById('root'))