什么是React-redux、为什么使用React-redux、怎么使用React-redux

最新推荐文章于 2023-08-19 20:32:32 发布

weixin_34413065

最新推荐文章于 2023-08-19 20:32:32 发布

阅读量590

点赞数

文章标签： javascript python json ViewUI

原文链接：https://my.oschina.net/kimyeongnam/blog/1860097

版权

2019独角兽企业重金招聘Python工程师标准>>>

1、什么是React-redux

React-redux是用于连接React和Redux的

2、为什么使用React-redux

使用React-redux可以使redux部分代码更简洁更明了，比如组建中需要使用到的数据都在mapStateToProps方法中，组建中需要修改store的操作都在mapDispatchToProps中。

3、如何使用React-redux

下面是一个简单的例子

//store/index.js 
//store部分的代码和没有使用react-redux时相同
import { createStore } from 'redux'
import reducer from './reducer';
const store = createStore(reducer);

export default store;

//reducer.js
//reducer部分和未使用react-redux时相同
const defaultState = {
  inputValue: '',
  list: []
}
//reducer 可以接受state但是不能修改state，需要对state进行深拷贝
export default (state = defaultState, action) => {
  if (action.type === 'change_input_value') {
    const newState = JSON.parse(JSON.stringify(state));
    newState.inputValue = action.value;
    return newState
  }
  if (action.type === 'add_input_value') {
    const newState = JSON.parse(JSON.stringify(state));
    newState.list = [...state.list, state.inputValue]
    newState.inputValue = '';
    return newState;
  }
  return state;
}

//index.js
//入口需要稍微调整

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
import { Provider } from 'react-redux';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <TodoList />
  </Provider>, 
document.getElementById('root')
);

import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux';

class TodoList extends Component {
  constructor(props){
    super(props)

    this.handleList = this.handleList.bind(this);
  }
  handleList(){
    return this.props.list.map((item) => {
      return <li>{item}</li>
    })
  }
  render() {
    return (
      <Fragment>
        <div>
          <input 
            value = {this.props.inputValue} 
            onChange = {this.props.handleInputChange}
          />
          <button onClick={this.props.btnClick}>提交</button>
        </div>
        <ul>
          {this.handleList()}
        </ul>
      </Fragment>
    );
  }
}
function mapStateToProps(state) {
  return {
    inputValue: state.inputValue,
    list: state.list
  }
}
function mapDispatchToProps(dispatch) {
  return {
    handleInputChange:function(e){
      const action = {
        type: 'change_input_value',
        value: e.target.value
      }
      dispatch(action);
    },
    btnClick:function(){
      const action = {
        type: 'add_input_value'
      }
      dispatch(action);
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

转载于:https://my.oschina.net/kimyeongnam/blog/1860097