react-redux

发表于 | 分类于 | | 阅读次数:
字数统计: 481 | 阅读时长 ≈ 2

title

redux

redux的三个概念: action reducer store

  • action: 一个包含type的object, 通常把一个返回action对象的函数称为action函数, 直接简称为action
1
2
3
4
5
6
7

function action(data) {
    return {
        type: 'Action1',
        data,
    };
}
  • reducer: 一个根据action type来更新数据的函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function reducer(state = { data: 1 }, action) {
    switch (action.type) {
        case 'action1': {
            const newState = JSON.parse(JSON.stringify(state));
            return newState;
        }
        case 'action2': {
             const newState = JSON.parse(JSON.stringify(state));
             return newState;
        }
        default: {
            return state;
        }
    }
}
  • store: 使用createStore从reducer函数创建的数据对象, 包含getState和dispatch方法
1
2
3
4
5
6
7
import { createStore } from 'redux';

let store = createStore(reducer);
console.log(store.getState())

store.dispatch(action(0))
console.log(store.getState())

注意! 更新数据需要dispatch对应的action

react-redux

用于将redux于react结合

  • Provider: 顶层组件, 注入store对象
1
2
3
4
5
6
7
8
import { Provider } from 'react-redux';

ReactDom.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('app'),
);
  • connect: 工具函数, 参数一为函数, 该函数接收state, 返回一个对象, 对象包含一系列数据. 参数二为函数, 该函数接收dispatch, 返回一个对象, 对象包含一系列方法
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    import { connect } from 'react-redux';  

    class App extends Component {
        componentDidMount() {
            this.props.dispatch({
                type: 'action1',
                data: 1,
            });
        }

        render() {
            // this.props.func1();
            // this.props.func2();
            return (
                <div>
                </div >
            );
        }
    }

    export default connect(
        state => ({
            data: state.data,
            obj: state.obj,
        }),
        dispatch => ({ dispatch }),
    )(App);

immutable.js

特殊的object(MAP)/array(LIST)

  • 更新数据: set setIn update updateIn
  • 读取数据: get getIn
  • 可以直接比较(深层比较)
  • 创建(fromJS), 还原(toJS)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
上述的reducer可以用下面的代码优化

function reducer(state = immutable.fromJS({ data: 1, obj: { aa: 1 } }), action) {
    switch (action.type) {
        case 'action1': {
            return state.set('data', action.data * 10);
        }
        case 'action2': {
            return state.setIn(['obj', 'aa'], action.data);
        }
        default: {
            return state;
        }
    }
}

优点

  • 无需深复制, 更新数据自动返回一个新对象
  • 适合与react shouldComponentUpdate结合来优化性能

pure-render-decorator

自动创建shouldComponentUpdate的工具, 需要配置babel decorator特性才能使用