标签：etop label put VID dev extension red reac r.js
1 安装react-redux： npm install --save react-redux
2.之前使用redux的store.subscribe监听 store的状态改变，通过store.getState函数获取store的状态值；并且需要划分ui组件和聪明组件，着实很麻烦，引入react-redux，可以改变这一切；
store定义如下，引入react-redux：
import { createStore, compose, applyMiddleware } from ‘redux‘;
import thunk from ‘redux-thunk‘;
import reducer from ‘./reducer‘;
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, composeEnhancers(
applyMiddleware(thunk)
));
export default store;
3. 顶部组件在最外层引入store，这样所有的组件都可以使用store了；
import React from ‘react‘; import ReactDOM from ‘react-dom‘; import App from ‘./App‘; import { Provider } from ‘react-redux‘ import store from ‘./store‘ const MyApp = ( <Provider store={store}> <App/> </Provider> ) ReactDOM.render(MyApp, document.getElementById(‘root‘));
4.具体在组件中使用connect将 ui组件变成聪明组件：
import React, { Component } from ‘react‘;
import ‘./App.css‘;
import { connect } from ‘react-redux‘
import {changeInputValue,addInputValue,deleteListItem,getListData} from ‘./store/actionCreator.js‘
class App extends Component {
constructor(props){
super(props);
this.state = {}
}
componentDidMount(){
this.props.getListDatas();
}
render() {
const {inputValue,changeInputValue,addListItem,list,deleteList} = this.props;
return (
<div className="App">
<label htmlFor="box">
输入信息
<input id="box"
value = {inputValue}
onChange ={changeInputValue}
/>
<button onClick={addListItem}>提交</button>
</label>
<ul>
{
list.map((item,index) => {
return (
<li key={index} onClick={deleteList.bind(this,index) }>{item}</li>
)
})
}
</ul>
</div>
);
}
}
const mapStateToProps = (state)=> {
return (
{
inputValue:state.inputValue,
list:state.list
}
)
};
const mapDispatchToProps = (dispatch)=>{
return {
changeInputValue(e){
dispatch(changeInputValue(e.target.value))
},
addListItem(){
dispatch(addInputValue())
},
deleteList(index){
dispatch(deleteListItem(index))
},
getListDatas(){
dispatch(getListData())
}
}
}
export default connect(mapStateToProps,mapDispatchToProps)(App);
标签：etop label put VID dev extension red reac r.js
原文地址：https://www.cnblogs.com/xiaozhumaopao/p/10548370.html
