Redux个人理解（一）

#### 通过阅读阮一峰的react教程，初步接触了redux，记录一下初次学习的一些体会，并review一下学到的知识点。
##### 1.大概结构
> 在redux中，所有的state存储在一个名为store的单一对象中，想要改变state唯一可以触发的方法是使用action，而action会如何改变state需要编写reducer
##### 2.纯组件和容器组件
> 在redux中，react组件总体可以分为两个类型。纯组件和容器组件。
> 纯组件是指不包含状态的纯react组件（即没有this.state），并使用es6中新语法可以轻松的从其他js文件中导出和引入，更充分的体现了代码组件化构成，提高了代码复用性。
> 容器组件专门负责接受用户的action和反映state上的值。具体生成方式是使用redux的connect方法，通过制定映射来将纯组件变成容器组件。

import {connect} from "redux"
    import {Mycomponent} from "Mycomponent" // 从Mycomponent.js中引入纯组件
    function map1(state) {
	return {
		"text" : state.text;
	}
    }
    // 返回结果为一个对象，对象为组件UI参数在state上的映射
    function map2(action) {
	return {
		"OnClick" : (e) => action({
			"type" : "click",
			"payload" : e.target.value
		});
	}
    }
    // 返回结果为一个对象，对象为指定用户操作类型， 指定接收的动作类型

const App = connect(
	map1, 
	map2
    )(Mycomponent)
#### 3.reducer编写
    
      function reducer(state = {
      text: '你好，访问者',
      name: '访问者'
    }, action) {
      switch (action.type) {
      case 'change':
      return {
        name: action.payload,
        text: '你好，' + action.payload
      };
      default:
      return state;
     }
    }

> reducer接受state和action两个参数，并通过action来计算新的state然后返回新的state
#### 4.使用redux中的createStore方法生成store，此方法以reducer作为参数
#### 5.使用redux的provider组件设置在app应用的最外层，并将上一步生成的store传入app
    <Provider store={store}>
        <App/>
    </Provider>

相关文章推荐

添加新评论