react-redux入门案例

1、创建actions

export default function addAction() {
  return {
    type: "add_action"
  }
}

也可以直接写成一个对象，但是写成函数的形式更加灵活，比如

export default function todos(text) {
  return {
    type: "add_action",
    text
  }
}

2、创建reducer

let initState = {
  value: 0
}

export default function reducer(state = initState, action) {
  switch (action.type) {
    case "add_action":
      return {
        value: state.value + 1
      }
    default:
      return state;
  }
}

reducer函数是对共享数据处理的主要函数，包含两个参数，

state：需要组件之间共享的变量，最好设定初始值，如果没有初始值，可能会出现undefined错误

action：需要对数据进行的某种操作，action中包含的type字段用于区分是那种操作，当然字段也可自己定义。

3、创建store并使用

创建

export default createStore(reducer)

使用

function App() {
  return (
    <Provider store={store}>
      <div className="App">
        <Home />
        <Button></Button>
      </div>
    </Provider>
  );
}

将需要内部数据共享的组件使用Provider标签包括，并传入store属性

4、修改共享数据

需要共性数据的变量需要使用connect()函数处理

const mapDispatchToProps = dispatch => {
  return {
    add: () => {
      dispatch(addAction())
    }
  }
}
export default connect(null, mapDispatchToProps)(Button)

mapDispatchToProps()函数返回的是一个对象，这个对象中存放的是对state进行操作的函数，这些函数最后都会映射到Button组件中的props属性中，组件中直接使用this.props.asdd()函数对共享数据进行操作。

组件内部的使用

class Button extends Component {
  constructor(props) {
    super(props)
    this.setState = {}
  }
// 好像必须写成箭头函数，否则出现调用this.props说undefined
  handleClick = () => {
    console.log("props:", this.props)
    this.props.add()
  }

  render() {
    return (
      <button onClick={this.handleClick}>增加</button>
    )
  }
}

好像必须写成箭头函数，否则出现调用this.props说undefined

5、读取共享数据

class  Home extends Component {
  constructor(props) {
    super(props)
  }
  render() {
    return(
      // 注意调用的时候使用的是props
      <h1>{this.props.value}</h1>
    )
  }
}

const mapStateToProps = state => {
  return {
    value: state.value
  }
}

export default connect(mapStateToProps)(Home)

使用connect函数对已有组件进行封装，可以读取state中的共享变量（store中的state），mapStateToProps()函数返回时值是一个对象，这个对象会将直接结构后放在props属性中，所以直接使用this.props就可以获取