react native集成redux,sagas问题。

Question

reducer

const initialState = Map({
    isRefreshing: false,
    loading: false,
    isLoadMore: false,
    noMore: false,
    data: {},
    url:'',
    params:{}
});
export default function project(state = initialState, action) {
    console.log('project state',state);
    console.log('project action',action);
    switch (action.type) {
        case ActionTypes.PROJECT_FETCH:
            return state.set('isRefreshing', true)
                .set('loading', true)
                .set('isLoadMore', true);
        case ActionTypes.PROJECT_RECEIVE:
            return state.set('isRefreshing', false)
                .set('isLoadMore', false)
                .set('noMore', action.data.success)
                .set('data', action.data.result)
                .set('loading', false);
 
        default:
            return state;
    }
}

sagas

export function* requestData(url, params) {
    console.log('sagas url',params);
    try {
        yield put(getAction(url, params).fetch);
        console.log('网络请求前');
        const data = yield call(HttpUtil.POST, url, params);
        console.log('网路请求后 获得数据');
        yield put(getAction(url, params,data).receive);
    } catch (error) {
        console.log('网络请求 出现错误');
        yield put(getAction(url, params,{}).receive);
    }
}

  const getAction = (url,params,data)=>{
    let action={
        fetch:'',
        receive:''
    };
    switch (url){
        case URL.home:
            action.fetch = home.fetchData(url, params);
            action.receive = home.receiveData(data);
            break;
        case URL.project:
            action.fetch = project.fetchData(url, params);
            action.receive = project.receiveData(data);
            break;
        case URL.login:
            action.fetch = login.fetchData(url, params);
            action.receive = login.receiveData(data);
    }
    return action;
};

export function* watchRequestData() {
    while (true) {
        const action = yield take([ActionTypes.PROJECT_REQUEST]);
        let {isRefreshing, loading, typeId, isLoadMore,url, params } = action;
        yield fork(
            requestData,
            url,
            params,
            isRefreshing,
            loading,
            typeId,
            isLoadMore,
        );
    }
}

container

class ProjectContainer extends React.Component {
    static navigationOptions = {
        tabBarLabel: 'hahah',
        tabBarIcon: ({ tintColor,focused }) => (
            <Image style={{width:SCALE(38),height:SCALE(35)}}
                   source={focused?AppImages.tab.project_active:AppImages.tab.project_unactive}/>
        ),
        headerLeft: <View style={{width:SCALE(100),height:SCALE(90),backgroundColor:'transparent'}}/>,
        title:'hahahha',
    };

    // shouldComponentUpdate(nextProps, nextState) {
    //     let value = is(this.props.project,nextProps.project);
    //     console.log('value',value);
    //     return !is(this.props.project,nextProps.project);
    // }

    render() {
        return <Project {...this.props} />;
    }
}

const mapStateToProps = (state) => {
    const { project } = state;
    return {
        project
    };
};
const mapDispatchToProps = (dispatch) => {
    const projectActions = bindActionCreators(projectCreators, dispatch);
    return {
        projectActions
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(ProjectContainer);

page:

   componentDidMount() {
        const { projectActions } = this.props;
        InteractionManager.runAfterInteractions(() => {
            projectActions.requestData(URL.project,{content:{pageNo:'1',pageSize:'15'}});//请求数据
        });
    }

那么我在哪里获取到网络请求的数据然后判断是否需要更新界面呢？

Answer 1

在saga那里,你派发一个异步的action,这个一步的action需要先请求接口,然后拿到数据,然后根据返回数据的错误与否来put一个action.