redux入门

redux入门

Redux[ri:'dʌks] ,它是ReactJs的状态管理。

ReactJs有二个方面没有涉及，
- 代码间的组织结构；
- 组件间的通讯；

不是有state和props么，
这二个东西，在使用上来讲，
它是依赖于组件之间的父子层级的嵌套的顺序的。

可以理解为，组件之间的嵌套层级，就是数据传递的通道。
父->子->孙，这即是组件的嵌套，同时又是一个数据传递的通路。
数据通过state、props，在它们之间传递。

但是这样做，当有多个子组件，通过同一个父组件传递数据时，
这就疯了，数据和组件变成了紧耦合，代码都写死了。
如果有调试、修改的时候那就没法搞了。

所以，数据的传递，应该是和组件、嵌套，无关的。
所以就出现了， Redux

redux，就是为了把数据从组件上剥离开来的。

应用场景
也不是说，所有的reactJs都要使用redux，
不恰当的使用，会增加应用的复杂度。

redux，它本身就是为了解决复杂的应用而生的，

• 如果你觉得用不上redux，那么就说明你不需要redux；
• 不同身份的用户，有不同的使用方式；
• 多个用户之间，需要协作 。

也就是说，多交互、多用户、多数据源。

redux 的设计思想 -->
1、整个app应用，是一个大的状态机。
视图（页面）和状态（数据），是一一对应用。
其实，还是数据驱动视图，那一套东西。

2、所有的状态，都保存在一个大对象里，叫Store，

其实就是所有的数据，都保存在一个大的全局变量里 -->

这个Store对象，它是独立于所有组件，
这其实是数据、和组件的，松耦合。

redux安装 -->
它需要单独安装，
npm install redux -save

Store -->，
这是用来保存数据的地方，整个app应用，应该只有一个store对象

createStore()，用来生成Store对象 -->
import {createStore} from ‘redux’
let store = createStore(fn); //生成了一个store对象

fn，它是一个参数，是reducers，叫计算过程，下面会说到

State，状态 -->
store.getState()，从store当中取得状态，
其实就是从大全局对象当中，获得数据。

redux约定，一个state对应一个view。这句话先不解释。

Action -->
Action，它是导致state发生变化的。

例如，
你点击了一个按钮，其实就是触发了一个action，
这时，我们说，view发出了一个action，
它会通知state，说要从store当中取得数据。

这时，我们说,一个state对应一个view。
你的view上发出了action，view变了，那么state也要发生变化

action，它是一个对象，结构如下：
let action = {
type : ‘xxx’,
info: ‘abc 123 xxx’
}

这里的type属性是必须的，其它的随意，
其实就是根据type，来分辨你的动作。

在redux当中，改变state的唯一方法，就是action

dispatch -->
它是view发出action的唯一方法，
.dispatch()，它是Store的方法。

import {createStore} from ‘redux’
let store = createStore(fn); //生成了一个store对象

// 创建一个action，
let action = {
type : ‘xxx’,
info: ‘abc 123 xxx’
}

// 某个按钮的事件，onclick的时候，执行了下面这一行
store.dispatch( action );
// 再根据type，来分辨你要进行的操作

你点击了页面上的某个按钮，触发了onclick或其它事件，
调用执行了 store.dispatch( action ) ，它的参数就是 action

这时我们说，
view通过dispatch发出了一个action

reducer，计算过程 -->
它主要负责，页面上发出了action，导致了state的变化。
action里面有一个type属性，用来分辨不断的操作，
这就在reducer里面。

store.dispatch(action)，
就是你view上dispatch了一个action，
现在，这个操作，走到了 reducers里面。

就是，
// fn，计算过程，是事先写好的，可接收参数，
let store = createStore(fn);

store.dispatch( action )，
action，传入了 reducer 里面，
怎么进去的？你不用管，这是redux内部的实现。
–>

reducer是一个函数，它有二个参数，
- 当前的state,
- action

当state变化的时候，会自动的触发，subscribe()方法。

调用ReactDOM.render()方法，
重新渲染页面，给出一个新的state，
会导致view视图变化，
这个过程，就叫reducer。

总体来看 -->
Store，它有三个方法,
- getState()，从store当中取得状态；
- dispatch()，是view发出action的唯一方法，
- subscribe()，监听state的变化，自动执行；

就是讲这一套东西下来，确实比较复杂，
但其实运行起来，你会发现，它挺简单的。

通过 这个小例子，理解并掌握 redux 的基本原理。

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';

import App from './App'
import reducer from './reducers'

let store = createStore(reducer);
let smallImgArr = store.getState().small;

 let renderFn = ()=>ReactDOM.render(
    <App  
        defaultBigImg={store.getState().bigImg}

        smallImg={smallImgArr}

        action_a={()=>store.dispatch({type:'img_1'})}
        action_b={()=>store.dispatch({type:'img_2'})}
        action_c={()=>store.dispatch({type:'img_3'})}
    />,
  document.getElementById('root')
);
renderFn();
store.subscribe(renderFn)

import React,{Component} from 'react';
import './css/base.css'
import './css/detail.css'
import './css/reset.css'
import Dt from './Dt'
import Dd from './Dd'
class App extends Component{
    render(){
        return(<div className='leftDiv h_after'>
            <dl>
                <Dt db_img={this.props.defaultBigImg}/>

                <Dd 
                    sL={this.props.smallImg} 
                    a_a={this.props.action_a}
                    a_b={this.props.action_b}
                    a_c={this.props.action_c}
                />
            </dl>
        </div>)
    }
}
export default App

import React,{Component} from 'react';
class Dt extends Component{
    render(){
        return(<dt>
            <img alt={this.props.db_img} src={this.props.db_img} />
        </dt>)
    }
}
export default Dt

import React,{Component} from 'react';
class Dd extends Component{
    switchBigImg(_i){
        let a_a = this.props.a_a;
        let a_b = this.props.a_b;
        let a_c = this.props.a_c;
        console.log(_i);
        
        let _arr = [a_a, a_b, a_c];
        _arr[_i]();
    }
    render(){
        let _imgs = this.props.sL
        // console.log(_imgs);
        
        return (<dd>
            <div className='smallImgList'>
                <ul> {
                     _imgs.map((n,i)=>
                        <li key={i} onClick={this.switchBigImg.bind(this,i)} >
                            <img  alt={i} src={n} />
                        </li>
                ) }
                </ul>
            </div>
        </dd>)
    }
}
export default Dd

import img1 from '../img/temp/1.png'
import img2 from '../img/temp/2.png'
import img3 from '../img/temp/3.jpg'
export default( state=0, action ) =>{
    console.log(action.type);
    switch(action.type){
        case 'img_1':
            return {bigImg:img1}
        case 'img_2':
            return {bigImg:img2}
        case 'img_3':
            return {bigImg:img3}
        default:
            return {
                bigImg:img1,
                small: [img1,img2,img3]
            } 
    }
}