react-redux 的使用

Posted 2021-02-13 xiaozhumaopao

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);