ListView X Basic Redux

https://github.com/ycj1905/react-native-redux

ListView

What, Why

不會一次把所有數據顯示出來，而是有在螢幕上的資料他才會顯示出來，所以在效能上會比較好。

How

componentWillMount() {
    const ds = new ListView.DataSource({
        rowHasChanged: (r1, r2) => r1 != r2
    });

    this.dataSource = ds.cloneWithRows(this.props.Users);
}

import { ListView } from 'react-native';

render() {
    return (
        <ListView
            dataSource={this.dataSource}
            renderRow={this.renderRow}
        />
    )
}

renderRow(user) {
    return <ListItem user={user} />
}

dataSource:

此ListView 要顯示的所有資料

renderRow:

每個 item 如何 render

Redux

Philosophy

(1) Web 是一個狀態機, View 與 State 是一一對應

(2) 所有狀態, 保存在一個 Object 裡

Create Store

import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers from './src/store/reducers'

const store = createStore(reducers);

render() {
    return (
      <Provider store={store}>
        <View style={{ flex:1 }}>
          <Header/>
          <Employees />
        </View>
      </Provider>
    );
}

React Cmp Redux Store

CONNECT

import { connect } from 'react-redux';

const mapStateToProps = state => {
    return { libraries: state.libraries };
}

export default connect(mapStateToProps)(Component);

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

Reducer/ Action

export const selectEmployee = (id) => {
    return {
        type: 'select_employee',
        payload: id
    };
};

import { combineReducers } from "redux";
import EmployeesReducer from './EmployeesReducer';
import SelectionReducer from './SelectionReducer';

export default combineReducers({
    employees: EmployeesReducer,
    selectedEmployeeId: SelectionReducer
});

import data from '../../employees.json'

export default () => data;

export default (state=null, action) => {
    switch (action.type) {
        case 'select_employee':
            return action.payload
        default:
            return state;
    }
}

combineReducers

EmployeesReducer

SelectionReducer

Create Action: return Object

Pure Function


reducer(previosState, action){return newState}

看看

React-Native Redux

https://www.cnblogs.com/miaomiaoshen/p/6757625.html

阮一峰: Redux

http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html

Reucer 命名

https://zhuanlan.zhihu.com/p/25863768

Reucer 介紹

https://medium.com/4cats-io/%E6%B7%B1%E5%85%A5%E6%B7%BA%E5%87%BA-redux-7b08403c4957

React Native X Redux

By Matt Jhou