第一次使用 redux。如何实施？

Question

我正在学习一些 Redux 教程，但仍然无法理解如何将其实现到我现有的组件中。每个教程都有一些不同的方法，我很困惑。我有如下代码，想使用 Redux 进行状态管理。我假设我需要删除 reducer 中的 this.setState 函数和控制状态，但在这种情况下，我实际上如何触发函数 handleSubmit？我已经写了 reducer, store, dispatch，但我还需要什么？

import React, { Component } from 'react';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import TextField from 'material-ui/TextField';

import { createStore } from "redux";
import { Provider } from 'react-redux'

const reducer = (state={errorText: '', open: true}, action) => {
  switch(action.type) {
    case "CHECK_PASSWORD": {
        return state = {...state, open: false};
    }
    default:
        return state;
 }
}

const store = createStore(reducer, {
    errorText: '',
    open:true
});

store.subscribe(() => {
console.log('store change', store.getState())
})

store.dispatch({type: "CHECK_PASSWORD"})

export default class StartDialog extends Component {

  handleSubmit = event => {
    let password = this.refs.myPasswordValue.input.value;
    // Check default password
      if(password === "123"){
            this.setState({ errorText: '', open: false})
      } else if (password !== "123" && password !== "") {
            this.setState({ errorText: "Password is incorrect" })
      } else if (password === ""){
            this.setState({ errorText: "Password is required" })
      }
     };

render() {
 const actions = [ <FlatButton label="Submit" primary={true} onClick={this.handleSubmit} /> ];

return (
    <Provider store={store} >
        <Dialog title="Welcome to the React App!" actions={actions} modal={true} open={this.state.open} >
            <TextField errorText={this.state.errorText}
            hintText="Password Field" 
            floatingLabelText="Password" 
            type="password" 
            ref="myPasswordValue" />
        </Dialog>
    </Provider>
);}}

Answer 1

实际上你不应该采用这种类型的结构，因为在调度动作的同一组件中使用 <Provider>。意味着我希望您将 Provider 视为父子关系，所有存储操作和订阅都应在子对象中完成。查看 Dan Abramov 的 关于将 Redux 的代码结构作为 UI 组件的讨论不应该在其中包含逻辑，逻辑应该在父组件中控制。

当您使用商店中的状态时，则不需要 setState。事实上，当你需要状态作为某些组件中的隐式数据时，你必须使用 setState。此外，在分派操作时，您已经描述了 type 属性，但没有像 reducer 中提到的那样附加实际有效负载（open）。

您还可以改进代码结构（以新手视角）-

在 index.js 中，主要的 <Provider> 组件应该被集成以提供状态给下面的子组件。

示例 index.js（根）代码类似于 -

import React from 'react';
import ReactDOM from 'react-dom';
import store from './store/store';
import TodoApp from './container/todoapp';
import { Provider } from 'react-redux';

const render = () => {
    ReactDOM.render(
    <Provider store={store}>
        <TodoApp />
    </Provider>
    ,document.getElementById('root'));
}

所以现在子组件可以使用商店。因此，现在您可以使用 connect() 直接连接到商店，因为传递 args 是必要的，因为 mapStateToProps 和 mapDispatchToProps.

容器文件夹中 todoapp.js 的示例文件 -

import React from 'react';
import ReactDOM from 'react-dom';
import store from '../store/store';
import Todolist from './components/todolist';
import AddTodo from './components/addtodo';
import Footer from './components/footer';
import { connect } from 'react-redux';

var noteId = 0;

const getVisibleTodos = (todos,filter) => {
    switch(filter){
        case 'SHOW_ALL' : 
            return todos;
        case 'SHOW_COMPLETED' :
            return todos.filter(t => t.completed);
        case 'SHOW_ACTIVE' :
            return todos.filter(t => !t.completed);
        default :
            return todos;
    }
}

class TodoApp extends React.Component{

    render() {
        const {todos,visibilityFilter} = this.props;

        return(
            <div>
                <AddTodo onAddClick={this.props.onAddTodoClick} />
                <ul>
                    <Todolist todos={this.props.todos} 
                    onTodoClick ={this.props.onTodoListClick}/>
                </ul>
                <Footer visibilityFilter={this.props.visibilityFilter} 
                        onFilterClick={this.props.onLinkClick} />
              <button onClick = {() => console.log(store.getState())}> Arbitrary Button </button>
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        visibilityFilter : state.visibilityFilter,
        todos: getVisibleTodos(state.todos,state.visibilityFilter)
    }
}

const mapDispatchToProps = (dispacth) => {
    return {
        onLinkClick : (filter) => {
            store.dispatch({type :'SET_VISIBILITY_FILTER',filter});
        },
        onTodoListClick : (id) => {
            store.dispatch({type:'TOGGLE_TODO',id});
        },
        onAddTodoClick : (text) => {
            store.dispatch({type:'ADD_TODO',id : noteId++,text})
        }
    }
}

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

render();

商店将包括 -

 import {createStore, combineReducers} from 'redux';

 const todo = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        id: action.id,
        text: action.text,
        completed: false
      }
    case 'TOGGLE_TODO':
      if (state.id !== action.id) {
        return state;
      }

      return {
        ...state,
        completed: !state.completed
      }
    default:
      return state;
  }
}

const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        todo(undefined, action)
      ]
    case 'TOGGLE_TODO':
      return state.map(t => todo(t, action));
    default:
      return state;
  }
}

const visibilityFilter = (state = 'SHOW_ALL', action) => {
  switch(action.type){
      case 'SET_VISIBILITY_FILTER' :
          return action.filter;
      default :
          return state;
  }
}


const todoApp = combineReducers({ todos,visibilityFilter })

const store = createStore(todoApp);
console.log(store.getState());

export default store;

如果你想实现更复杂的项目结构必须升级当前项目然后检查这个代码结构 - https://github.com/react-boilerplate/react-boilerplate

第一次使用 redux。如何实施？

Very first time with redux. How to implement?

javascript

store

reactjs

redux