react.js - react todo例子有几点疑问，求解答

问题描述

问 题

import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import App from './containers/App'
import todoApp from './reducers'

import有的带大括号，有的不带大括号，是什么个情况呢

---

actions.js

export const ADD_TODO = 'ADD_TODO';
export function addTodo(text) {
    return { type: ADD_TODO, text }
}

reducers.js

function visibilityFilter(state = SHOW_ALL, action) {
    switch (action.type) {
        case SET_VISIBILITY_FILTER:
            return action.filter
        default:
            return state
    }
}

function todos(state = [], action) {
    switch (action.type) {
        case ADD_TODO:
            return [
                ...state,
                {
                    text: action.text,
                    completed: false
                }
            ]
        case COMPLETE_TODO:
            return [
                ...state.slice(0, action.index),
                Object.assign({}, state[action.index], {
                    completed: true
                }),
                ...state.slice(action.index + 1)
            ]
        default:
            return state
    }
}

组件

<AddTodo
    onAddClick={text =>
        dispatch(addTodo(text))
        } />

点击后怎么就能自动匹配reducers.js中的todos函数呢， 哪里都找不到调用todos的代码，为什么没匹配visibilityFilter函数，

解决方案

这个是根据模块的定义来引入的，你可以去网上看一下，export，export default这两个的区别。有时候需要用export来模块化，有时候完全可以用export default来把整个代码都模块化。只用export模块化的，你需要用花括号来指出你要引入的模块的子模块的名字，而export default来模块化的，你只用 export default xxx中的xxx引入进来就可以。这个跟redux什么的无关，是es6模块化中两种模块化方式的不同之处。react的很多模块其实两种引入方式都支持的，望参考。

这篇关于react.js - react todo例子有几点疑问，求解答的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！