react-redux 的使用

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

巴特西

react-redux 的使用

最新文章

热门文章